Demo：将设置类的配置从基础样式移到单独的设置栏中

simple-mind-map/src/core/render/node/Style.js

@@ -12,7 +12,7 @@ const backgroundStyleProps = [
 class Style {
   //   设置背景样式
   static setBackgroundStyle(el, themeConfig) {
-    if (!this.el) return
+    if (!el) return
     // 缓存容器元素原本的样式
     if (!Style.cacheStyle) {
       Style.cacheStyle = {}

web/src/config/en.js

@@ -439,6 +439,11 @@ export const sidebarTriggerList = [
     value: 'outline',
     icon: 'iconfuhao-dagangshu'
   },
+  {
+    name: 'Setting',
+    value: 'setting',
+    icon: 'iconshezhi'
+  },
   {
     name: 'ShortcutKey',
     value: 'shortcutKey',

web/src/config/zh.js

@@ -534,6 +534,11 @@ export const sidebarTriggerList = [
     value: 'outline',
     icon: 'iconfuhao-dagangshu'
   },
+  {
+    name: '设置',
+    value: 'setting',
+    icon: 'iconshezhi'
+  },
   {
     name: '快捷键',
     value: 'shortcutKey',

web/src/config/zhtw.js

@@ -439,6 +439,11 @@ export const sidebarTriggerList = [
     value: 'outline',
     icon: 'iconfuhao-dagangshu'
   },
+  {
+    name: '設置',
+    value: 'setting',
+    icon: 'iconshezhi'
+  },
   {
     name: '快捷鍵',
     value: 'shortcutKey',

web/src/lang/en_us.js

@@ -26,8 +26,41 @@ export default {
     nodeBorderType: 'Node border style',
     nodeUseLineStyle: 'Use only has bottom border style',
     otherConfig: 'Other config',
-    enableFreeDrag: 'Enable node free drag(Beta)',
+    associativeLine: 'Associative line',
+    associativeLineWidth: 'Width',
+    associativeLineColor: 'Color',
+    associativeLineActiveWidth: 'Active width',
+    associativeLineActiveColor: 'Active color',
+    rootStyle: 'Root Node',
+    associativeLineText: 'Associative line text',
+    fontFamily: 'Font family',
+    fontSize: 'Font size',
+    rootLineStartPos: 'Root line start pos',
+    center: 'Center',
+    edge: 'Edge',
+    rainbowLines: 'Rainbow lines',
+    notUseRainbowLines: 'Not use rainbow lines',
+    outerFramePadding: 'Outer frame padding'
+  },
+  setting: {
+    title: 'Setting',
     openPerformance: 'Enable performance mode',
+    enableFreeDrag: 'Enable node free drag(Beta)',
+    isEnableNodeRichText: 'Enable node rich text editing',
+    mousewheelAction: 'Mouse wheel behavior',
+    zoomView: 'Zoom view',
+    moveViewUpDown: 'Move view up and down',
+    mousewheelZoomActionReverse: 'Mouse Wheel Zoom',
+    mousewheelZoomActionReverse1: 'Zoom out forward and zoom in back',
+    mousewheelZoomActionReverse2: 'Zoom in forward and zoom out back',
+    createNewNodeBehavior: 'Behavior of creating new node',
+    default: 'Active new node and editing',
+    notActive: 'Not active new node',
+    activeOnly: 'Only active new node but not editing',
+    openRealtimeRenderOnNodeTextEdit:
+      'Enable real-time rendering effect for text editing',
+    isShowScrollbar: 'Is show scrollbar',
+    isUseHandDrawnLikeStyle: 'Is use hand drawn like style',
     watermark: 'Watermark',
     showWatermark: 'Is show watermark',
     onlyExport: 'Only export',
@@ -39,36 +72,7 @@ export default {
     watermarkAngle: 'Angle',
     watermarkTextOpacity: 'Text opacity',
     watermarkTextFontSize: 'Font size',
-    belowNode: 'Display below nodes',
-    isEnableNodeRichText: 'Enable node rich text editing',
-    mousewheelAction: 'Mouse wheel behavior',
-    zoomView: 'Zoom view',
-    moveViewUpDown: 'Move view up and down',
-    associativeLine: 'Associative line',
-    associativeLineWidth: 'Width',
-    associativeLineColor: 'Color',
-    associativeLineActiveWidth: 'Active width',
-    associativeLineActiveColor: 'Active color',
-    mousewheelZoomActionReverse: 'Mouse Wheel Zoom',
-    mousewheelZoomActionReverse1: 'Zoom out forward and zoom in back',
-    mousewheelZoomActionReverse2: 'Zoom in forward and zoom out back',
-    createNewNodeBehavior: 'Behavior of creating new node',
-    default: 'Active new node and editing',
-    notActive: 'Not active new node',
-    activeOnly: 'Only active new node but not editing',
-    rootStyle: 'Root Node',
-    associativeLineText: 'Associative line text',
-    fontFamily: 'Font family',
-    fontSize: 'Font size',
-    isShowScrollbar: 'Is show scrollbar',
-    isUseHandDrawnLikeStyle: 'Is use hand drawn like style',
-    rootLineStartPos: 'Root line start pos',
-    center: 'Center',
-    edge: 'Edge',
-    rainbowLines: 'Rainbow lines',
-    notUseRainbowLines: 'Not use rainbow lines',
-    outerFramePadding: 'Outer frame padding',
-    openRealtimeRenderOnNodeTextEdit: 'Enable real-time rendering effect for text editing'
+    belowNode: 'Display below nodes'
   },
   color: {
     moreColor: 'More color'

web/src/lang/zh_cn.js

@@ -25,9 +25,40 @@ export default {
     belowLevel2Node: '三级及以下节点',
     nodeBorderType: '节点边框风格',
     nodeUseLineStyle: '是否使用只有底边框的风格',
-    otherConfig: '其他配置',
-    enableFreeDrag: '是否开启节点自由拖拽',
+    associativeLine: '关联线',
+    associativeLineWidth: '粗细',
+    associativeLineColor: '颜色',
+    associativeLineActiveWidth: '激活粗细',
+    associativeLineActiveColor: '激活颜色',
+    rootStyle: '根节点',
+    associativeLineText: '关联线文字',
+    fontFamily: '字体',
+    fontSize: '字号',
+    rootLineStartPos: '根节点连线起始位置',
+    center: '中心',
+    edge: '边缘',
+    rainbowLines: '彩虹线条',
+    notUseRainbowLines: '不使用彩虹线条',
+    outerFramePadding: '外框内边距'
+  },
+  setting: {
+    title: '设置',
     openPerformance: '开启性能模式(Beta)',
+    enableFreeDrag: '是否开启节点自由拖拽',
+    isEnableNodeRichText: '是否开启节点富文本编辑',
+    mousewheelAction: '鼠标滚轮行为',
+    zoomView: '缩放视图',
+    moveViewUpDown: '上下移动视图',
+    mousewheelZoomActionReverse: '鼠标滚轮缩放',
+    mousewheelZoomActionReverse1: '向前缩小向后放大',
+    mousewheelZoomActionReverse2: '向前放大向后缩小',
+    createNewNodeBehavior: '创建新节点的行为',
+    default: '激活新节点及进入编辑',
+    notActive: '不激活新节点',
+    activeOnly: '只激活新节点，不进入编辑',
+    openRealtimeRenderOnNodeTextEdit: '开启文本编辑实时渲染效果',
+    isShowScrollbar: '是否显示滚动条',
+    isUseHandDrawnLikeStyle: '是否开启手绘风格',
     watermark: '水印',
     showWatermark: '是否显示水印',
     watermarkDefaultText: '水印文字',
@@ -39,36 +70,7 @@ export default {
     watermarkAngle: '旋转角度',
     watermarkTextOpacity: '文字透明度',
     watermarkTextFontSize: '文字字号',
-    belowNode: '显示在节点下方',
-    isEnableNodeRichText: '是否开启节点富文本编辑',
-    mousewheelAction: '鼠标滚轮行为',
-    zoomView: '缩放视图',
-    moveViewUpDown: '上下移动视图',
-    associativeLine: '关联线',
-    associativeLineWidth: '粗细',
-    associativeLineColor: '颜色',
-    associativeLineActiveWidth: '激活粗细',
-    associativeLineActiveColor: '激活颜色',
-    mousewheelZoomActionReverse: '鼠标滚轮缩放',
-    mousewheelZoomActionReverse1: '向前缩小向后放大',
-    mousewheelZoomActionReverse2: '向前放大向后缩小',
-    createNewNodeBehavior: '创建新节点的行为',
-    default: '激活新节点及进入编辑',
-    notActive: '不激活新节点',
-    activeOnly: '只激活新节点，不进入编辑',
-    rootStyle: '根节点',
-    associativeLineText: '关联线文字',
-    fontFamily: '字体',
-    fontSize: '字号',
-    isShowScrollbar: '是否显示滚动条',
-    isUseHandDrawnLikeStyle: '是否开启手绘风格',
-    rootLineStartPos: '根节点连线起始位置',
-    center: '中心',
-    edge: '边缘',
-    rainbowLines: '彩虹线条',
-    notUseRainbowLines: '不使用彩虹线条',
-    outerFramePadding: '外框内边距',
-    openRealtimeRenderOnNodeTextEdit: '开启文本编辑实时渲染效果'
+    belowNode: '显示在节点下方'
   },
   color: {
     moreColor: '更多颜色'

web/src/lang/zh_tw.js

@@ -26,8 +26,40 @@ export default {
     nodeBorderType: '節點邊框樣式',
     nodeUseLineStyle: '僅使用底邊框樣式',
     otherConfig: '其他設定',
-    enableFreeDrag: '啟用節點自由拖曳 (Beta)',
+    associativeLine: '關聯線',
+    associativeLineWidth: '寬度',
+    associativeLineColor: '顏色',
+    associativeLineActiveWidth: '啟用時寬度',
+    associativeLineActiveColor: '啟用時顏色',
+    rootStyle: '根節點',
+    associativeLineText: '關聯線文字',
+    fontFamily: '字型',
+    fontSize: '字型大小',
+    rootLineStartPos: '根節點連線起始位置',
+    center: '中心',
+    edge: '邊緣',
+    rainbowLines: '彩虹線條',
+    notUseRainbowLines: '不使用彩虹線條',
+    outerFramePadding: '外框內距'
+  },
+  setting: {
+    title: '設置',
     openPerformance: '啟用效能模式',
+    enableFreeDrag: '啟用節點自由拖曳 (Beta)',
+    isEnableNodeRichText: '啟用節點豐富文字編輯',
+    mousewheelAction: '滑鼠滾輪行為',
+    zoomView: '縮放檢視',
+    moveViewUpDown: '上下移動檢視',
+    mousewheelZoomActionReverse: '滑鼠滾輪縮放',
+    mousewheelZoomActionReverse1: '向前縮小，向後放大',
+    mousewheelZoomActionReverse2: '向前放大，向後縮小',
+    createNewNodeBehavior: '建立新節點行為',
+    default: '啟用新節點並進入編輯',
+    notActive: '不啟用新節點',
+    activeOnly: '僅啟用新節點，不進入編輯',
+    openRealtimeRenderOnNodeTextEdit: '開啟文本編輯實時渲染效果',
+    isShowScrollbar: '顯示捲軸',
+    isUseHandDrawnLikeStyle: '使用手繪風格',
     watermark: '浮水印',
     showWatermark: '顯示浮水印',
     onlyExport: '僅在匯出時顯示',
@@ -39,36 +71,7 @@ export default {
     watermarkAngle: '旋轉角度',
     watermarkTextOpacity: '文字透明度',
     watermarkTextFontSize: '字型大小',
-    belowNode: '顯示在節點下方',
-    isEnableNodeRichText: '啟用節點豐富文字編輯',
-    mousewheelAction: '滑鼠滾輪行為',
-    zoomView: '縮放檢視',
-    moveViewUpDown: '上下移動檢視',
-    associativeLine: '關聯線',
-    associativeLineWidth: '寬度',
-    associativeLineColor: '顏色',
-    associativeLineActiveWidth: '啟用時寬度',
-    associativeLineActiveColor: '啟用時顏色',
-    mousewheelZoomActionReverse: '滑鼠滾輪縮放',
-    mousewheelZoomActionReverse1: '向前縮小，向後放大',
-    mousewheelZoomActionReverse2: '向前放大，向後縮小',
-    createNewNodeBehavior: '建立新節點行為',
-    default: '啟用新節點並進入編輯',
-    notActive: '不啟用新節點',
-    activeOnly: '僅啟用新節點，不進入編輯',
-    rootStyle: '根節點',
-    associativeLineText: '關聯線文字',
-    fontFamily: '字型',
-    fontSize: '字型大小',
-    isShowScrollbar: '顯示捲軸',
-    isUseHandDrawnLikeStyle: '使用手繪風格',
-    rootLineStartPos: '根節點連線起始位置',
-    center: '中心',
-    edge: '邊緣',
-    rainbowLines: '彩虹線條',
-    notUseRainbowLines: '不使用彩虹線條',
-    outerFramePadding: '外框內距',
-    openRealtimeRenderOnNodeTextEdit: '開啟文本編輯實時渲染效果'
+    belowNode: '顯示在節點下方'
   },
   color: {
     moreColor: '更多顏色'

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

@@ -714,146 +714,6 @@
           ></el-slider>
         </div>
       </div>
-      <!-- 水印 -->
-      <div class="title noTop">{{ $t('baseStyle.watermark') }}</div>
-      <div class="row">
-        <!-- 是否显示水印 -->
-        <div class="rowItem">
-          <el-checkbox
-            v-model="watermarkConfig.show"
-            @change="watermarkShowChange"
-            >{{ $t('baseStyle.showWatermark') }}</el-checkbox
-          >
-        </div>
-      </div>
-      <template v-if="watermarkConfig.show">
-        <!-- 是否仅在导出时显示 -->
-        <div class="row">
-          <div class="rowItem">
-            <el-checkbox
-              v-model="watermarkConfig.onlyExport"
-              @change="updateWatermarkConfig"
-              >{{ $t('baseStyle.onlyExport') }}</el-checkbox
-            >
-          </div>
-        </div>
-        <!-- 是否在节点下方 -->
-        <div class="row">
-          <div class="rowItem">
-            <el-checkbox
-              v-model="watermarkConfig.belowNode"
-              @change="updateWatermarkConfig"
-              >{{ $t('baseStyle.belowNode') }}</el-checkbox
-            >
-          </div>
-        </div>
-        <!-- 水印文字 -->
-        <div class="row">
-          <div class="rowItem">
-            <span class="name">{{ $t('baseStyle.watermarkText') }}</span>
-            <el-input
-              v-model="watermarkConfig.text"
-              size="small"
-              @change="updateWatermarkConfig"
-              @keydown.native.stop
-            ></el-input>
-          </div>
-        </div>
-        <!-- 水印文字颜色 -->
-        <div class="row">
-          <div class="rowItem">
-            <span class="name">{{ $t('baseStyle.watermarkTextColor') }}</span>
-            <span
-              class="block"
-              v-popover:popover3
-              :style="{ backgroundColor: watermarkConfig.textStyle.color }"
-            ></span>
-            <el-popover ref="popover3" placement="bottom" trigger="click">
-              <Color
-                :color="watermarkConfig.textStyle.color"
-                @change="
-                  value => {
-                    watermarkConfig.textStyle.color = value
-                    updateWatermarkConfig()
-                  }
-                "
-              ></Color>
-            </el-popover>
-          </div>
-        </div>
-        <!-- 水印文字透明度 -->
-        <div class="row">
-          <div class="rowItem">
-            <span class="name">{{ $t('baseStyle.watermarkTextOpacity') }}</span>
-            <el-slider
-              v-model="watermarkConfig.textStyle.opacity"
-              style="width: 170px"
-              :min="0"
-              :max="1"
-              :step="0.1"
-              @change="updateWatermarkConfig"
-            ></el-slider>
-          </div>
-        </div>
-        <!-- 水印文字字号 -->
-        <div class="row">
-          <div class="rowItem">
-            <span class="name">{{
-              $t('baseStyle.watermarkTextFontSize')
-            }}</span>
-            <el-input-number
-              v-model="watermarkConfig.textStyle.fontSize"
-              size="small"
-              :min="0"
-              :max="50"
-              :step="1"
-              @change="updateWatermarkConfig"
-              @keydown.native.stop
-            ></el-input-number>
-          </div>
-        </div>
-        <!-- 旋转角度 -->
-        <div class="row">
-          <div class="rowItem">
-            <span class="name">{{ $t('baseStyle.watermarkAngle') }}</span>
-            <el-input-number
-              v-model="watermarkConfig.angle"
-              size="small"
-              :min="0"
-              :max="90"
-              :step="10"
-              @change="updateWatermarkConfig"
-              @keydown.native.stop
-            ></el-input-number>
-          </div>
-        </div>
-        <!-- 水印行间距 -->
-        <div class="row">
-          <div class="rowItem">
-            <span class="name">{{ $t('baseStyle.watermarkLineSpacing') }}</span>
-            <el-input-number
-              v-model="watermarkConfig.lineSpacing"
-              size="small"
-              :step="10"
-              @change="updateWatermarkConfig"
-              @keydown.native.stop
-            ></el-input-number>
-          </div>
-        </div>
-        <!-- 水印文字间距 -->
-        <div class="row">
-          <div class="rowItem">
-            <span class="name">{{ $t('baseStyle.watermarkTextSpacing') }}</span>
-            <el-input-number
-              v-model="watermarkConfig.textSpacing"
-              size="small"
-              :step="10"
-              @change="updateWatermarkConfig"
-              @keydown.native.stop
-            ></el-input-number>
-          </div>
-        </div>
-      </template>
       <!-- 外框内边距 -->
       <div class="title noTop">{{ $t('baseStyle.outerFramePadding') }}</div>
       <div class="row">
@@ -884,162 +744,6 @@
           ></el-slider>
         </div>
       </div>
-      <!-- 其他配置 -->
-      <div class="title noTop">{{ $t('baseStyle.otherConfig') }}</div>
-      <!-- 配置性能模式 -->
-      <div class="row">
-        <div class="rowItem">
-          <el-checkbox
-            v-model="config.openPerformance"
-            @change="
-              value => {
-                updateOtherConfig('openPerformance', value)
-              }
-            "
-            >{{ $t('baseStyle.openPerformance') }}</el-checkbox
-          >
-        </div>
-      </div>
-      <!-- 配置开启自由拖拽 -->
-      <div class="row">
-        <div class="rowItem">
-          <el-checkbox
-            v-model="config.enableFreeDrag"
-            @change="
-              value => {
-                updateOtherConfig('enableFreeDrag', value)
-              }
-            "
-            >{{ $t('baseStyle.enableFreeDrag') }}</el-checkbox
-          >
-        </div>
-      </div>
-      <!-- 配置是否启用富文本编辑 -->
-      <div class="row">
-        <div class="rowItem">
-          <el-checkbox
-            v-model="enableNodeRichText"
-            @change="enableNodeRichTextChange"
-            >{{ $t('baseStyle.isEnableNodeRichText') }}</el-checkbox
-          >
-        </div>
-      </div>
-      <!-- 配置鼠标滚轮行为 -->
-      <div class="row">
-        <div class="rowItem">
-          <span class="name">{{ $t('baseStyle.mousewheelAction') }}</span>
-          <el-select
-            size="mini"
-            style="width: 120px"
-            v-model="config.mousewheelAction"
-            placeholder=""
-            @change="
-              value => {
-                updateOtherConfig('mousewheelAction', value)
-              }
-            "
-          >
-            <el-option
-              :label="$t('baseStyle.zoomView')"
-              value="zoom"
-            ></el-option>
-            <el-option
-              :label="$t('baseStyle.moveViewUpDown')"
-              value="move"
-            ></el-option>
-          </el-select>
-        </div>
-      </div>
-      <!-- 配置鼠标缩放行为 -->
-      <div class="row" v-if="config.mousewheelAction === 'zoom'">
-        <div class="rowItem">
-          <span class="name">{{
-            $t('baseStyle.mousewheelZoomActionReverse')
-          }}</span>
-          <el-select
-            size="mini"
-            style="width: 120px"
-            v-model="config.mousewheelZoomActionReverse"
-            placeholder=""
-            @change="
-              value => {
-                updateOtherConfig('mousewheelZoomActionReverse', value)
-              }
-            "
-          >
-            <el-option
-              :label="$t('baseStyle.mousewheelZoomActionReverse1')"
-              :value="false"
-            ></el-option>
-            <el-option
-              :label="$t('baseStyle.mousewheelZoomActionReverse2')"
-              :value="true"
-            ></el-option>
-          </el-select>
-        </div>
-      </div>
-      <!-- 配置创建新节点时的行为 -->
-      <div class="row">
-        <div class="rowItem">
-          <span class="name">{{ $t('baseStyle.createNewNodeBehavior') }}</span>
-          <el-select
-            size="mini"
-            style="width: 120px"
-            v-model="config.createNewNodeBehavior"
-            placeholder=""
-            @change="
-              value => {
-                updateOtherConfig('createNewNodeBehavior', value)
-              }
-            "
-          >
-            <el-option
-              :label="$t('baseStyle.default')"
-              value="default"
-            ></el-option>
-            <el-option
-              :label="$t('baseStyle.notActive')"
-              value="notActive"
-            ></el-option>
-            <el-option
-              :label="$t('baseStyle.activeOnly')"
-              value="activeOnly"
-            ></el-option>
-          </el-select>
-        </div>
-      </div>
-      <!-- 是否开启文本编辑时实时更新节点大小 -->
-      <div class="row">
-        <div class="rowItem">
-          <el-checkbox
-            v-model="config.openRealtimeRenderOnNodeTextEdit"
-            @change="
-              updateOtherConfig('openRealtimeRenderOnNodeTextEdit', $event)
-            "
-            >{{ $t('baseStyle.openRealtimeRenderOnNodeTextEdit') }}</el-checkbox
-          >
-        </div>
-      </div>
-      <!-- 是否显示滚动条 -->
-      <div class="row">
-        <div class="rowItem">
-          <el-checkbox
-            v-model="localConfigs.isShowScrollbar"
-            @change="updateLocalConfig('isShowScrollbar', $event)"
-            >{{ $t('baseStyle.isShowScrollbar') }}</el-checkbox
-          >
-        </div>
-      </div>
-      <!-- 是否开启手绘风格 -->
-      <div class="row" v-if="supportHandDrawnLikeStyle">
-        <div class="rowItem">
-          <el-checkbox
-            v-model="localConfigs.isUseHandDrawnLikeStyle"
-            @change="updateLocalConfig('isUseHandDrawnLikeStyle', $event)"
-            >{{ $t('baseStyle.isUseHandDrawnLikeStyle') }}</el-checkbox
-          >
-        </div>
-      </div>
     </div>
   </Sidebar>
 </template>
@@ -1130,35 +834,8 @@ export default {
         marginY: 0,
         nodeUseLineStyle: false
       },
-      config: {
-        openPerformance: false,
-        enableFreeDrag: false,
-        mousewheelAction: 'zoom',
-        mousewheelZoomActionReverse: false,
-        createNewNodeBehavior: 'default',
-        openRealtimeRenderOnNodeTextEdit: true
-      },
-      watermarkConfig: {
-        show: false,
-        onlyExport: false,
-        text: '',
-        lineSpacing: 100,
-        textSpacing: 100,
-        angle: 30,
-        textStyle: {
-          color: '',
-          opacity: 0,
-          fontSize: 1
-        }
-      },
       rainbowLinesPopoverVisible: false,
       curRainbowLineColorList: null,
-      updateWatermarkTimer: null,
-      enableNodeRichText: true,
-      localConfigs: {
-        isShowScrollbar: false,
-        isUseHandDrawnLikeStyle: false
-      },
       currentLayout: '', // 当前结构
       outerFramePadding: {
         outerFramePaddingX: 0,
@@ -1170,8 +847,7 @@ export default {
     ...mapState({
       activeSidebar: state => state.activeSidebar,
       localConfig: state => state.localConfig,
-      isDark: state => state.localConfig.isDark,
-      supportHandDrawnLikeStyle: state => state.supportHandDrawnLikeStyle
+      isDark: state => state.localConfig.isDark
     }),
     lineStyleList() {
       return lineStyleList[this.$i18n.locale] || lineStyleList.zh
@@ -1234,8 +910,6 @@ export default {
       if (val === 'baseStyle') {
         this.$refs.sidebar.show = true
         this.initStyle()
-        this.initConfig()
-        this.initWatermark()
         this.initRainbowLines()
         this.initOuterFramePadding()
         this.currentLayout = this.mindMap.getLayout()
@@ -1256,7 +930,6 @@ export default {
     }
   },
   created() {
-    this.initLoacalConfig()
     this.$bus.$on('setData', this.onSetData)
   },
   beforeDestroy() {
@@ -1272,11 +945,7 @@ export default {
       }, 0)
     },
 
-    /**
-     * @Author: 王林
-     * @Date: 2021-05-05 14:02:12
-     * @Desc: 初始样式
-     */
+    // 初始样式
     initStyle() {
       ;[
         'backgroundColor',
@@ -1316,42 +985,6 @@ export default {
       this.initMarginStyle()
     },
 
-    // 初始化其他配置
-    initConfig() {
-      ;[
-        'openPerformance',
-        'enableFreeDrag',
-        'mousewheelAction',
-        'mousewheelZoomActionReverse',
-        'createNewNodeBehavior',
-        'openRealtimeRenderOnNodeTextEdit'
-      ].forEach(key => {
-        this.config[key] = this.mindMap.getConfig(key)
-      })
-    },
-
-    // 初始化本地配置
-    initLoacalConfig() {
-      this.enableNodeRichText = this.localConfig.openNodeRichText
-      this.mousewheelAction = this.localConfig.mousewheelAction
-      this.mousewheelZoomActionReverse = this.localConfig.mousewheelZoomActionReverse
-      ;['isShowScrollbar', 'isUseHandDrawnLikeStyle'].forEach(key => {
-        this.localConfigs[key] = this.localConfig[key]
-      })
-    },
-
-    // 初始化水印配置
-    initWatermark() {
-      let config = this.mindMap.getConfig('watermarkConfig')
-      ;['text', 'lineSpacing', 'textSpacing', 'angle', 'onlyExport'].forEach(
-        key => {
-          this.watermarkConfig[key] = config[key]
-        }
-      )
-      this.watermarkConfig.show = !!config.text
-      this.watermarkConfig.textStyle = { ...config.textStyle }
-    },
-
     // 初始化彩虹线条配置
     initRainbowLines() {
       const config = this.mindMap.getConfig('rainbowLinesConfig') || {}
@@ -1372,11 +1005,7 @@ export default {
       )
     },
 
-    /**
-     * @Author: 王林
-     * @Date: 2021-07-03 22:27:32
-     * @Desc: margin初始值
-     */
+    // margin初始值
     initMarginStyle() {
       ;['marginX', 'marginY'].forEach(key => {
         this.style[key] = this.mindMap.getThemeConfig()[this.marginActiveTab][
@@ -1385,11 +1014,7 @@ export default {
       })
     },
 
-    /**
-     * @Author: 王林
-     * @Date: 2021-05-05 14:05:40
-     * @Desc: 更新配置
-     */
+    // 更新配置
     update(key, value) {
       if (key === 'backgroundImage' && value === 'none') {
         this.style[key] = ''
@@ -1407,36 +1032,6 @@ export default {
       })
     },
 
-    // 更新其他配置
-    updateOtherConfig(key, value) {
-      this.mindMap.updateConfig({
-        [key]: value
-      })
-      this.data.config = this.data.config || {}
-      this.data.config[key] = value
-      storeConfig({
-        config: this.data.config
-      })
-    },
-
-    // 更新水印配置
-    updateWatermarkConfig() {
-      clearTimeout(this.updateWatermarkTimer)
-      this.updateWatermarkTimer = setTimeout(() => {
-        let { show, ...config } = this.watermarkConfig
-        this.mindMap.watermark.updateWatermark({
-          ...config
-        })
-        this.data.config = this.data.config || {}
-        this.data.config.watermarkConfig = this.mindMap.getConfig(
-          'watermarkConfig'
-        )
-        storeConfig({
-          config: this.data.config
-        })
-      }, 300)
-    },
-
     // 更新彩虹线条配置
     updateRainbowLinesConfig(item) {
       this.rainbowLinesPopoverVisible = false
@@ -1488,33 +1083,6 @@ export default {
           config: this.data.theme.config
         }
       })
-    },
-
-    // 切换显示水印与否
-    watermarkShowChange(value) {
-      if (value) {
-        let text =
-          this.watermarkConfig.text || this.$t('baseStyle.watermarkDefaultText')
-        this.watermarkConfig.text = text
-      } else {
-        this.watermarkConfig.text = ''
-      }
-      this.updateWatermarkConfig()
-    },
-
-    // 切换是否开启节点富文本编辑
-    enableNodeRichTextChange(e) {
-      this.mindMap.renderer.textEdit.hideEditTextBox()
-      this.setLocalConfig({
-        openNodeRichText: e
-      })
-    },
-
-    // 本地配置
-    updateLocalConfig(key, value) {
-      this.setLocalConfig({
-        [key]: value
-      })
     }
   }
 }

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

@@ -38,6 +38,7 @@
     <SourceCodeEdit v-if="mindMap" :mindMap="mindMap"></SourceCodeEdit>
     <NodeOuterFrame v-if="mindMap" :mindMap="mindMap"></NodeOuterFrame>
     <NodeTagStyle v-if="mindMap" :mindMap="mindMap"></NodeTagStyle>
+    <Setting :data="mindMapData" :mindMap="mindMap"></Setting>
     <div
       class="dragMask"
       v-if="showDragMask"
@@ -118,6 +119,7 @@ import SourceCodeEdit from './SourceCodeEdit.vue'
 import NodeAttachment from './NodeAttachment.vue'
 import NodeOuterFrame from './NodeOuterFrame.vue'
 import NodeTagStyle from './NodeTagStyle.vue'
+import Setting from './Setting.vue'
 
 // 注册插件
 MindMap.usePlugin(MiniMap)
@@ -173,7 +175,8 @@ export default {
     SourceCodeEdit,
     NodeAttachment,
     NodeOuterFrame,
-    NodeTagStyle
+    NodeTagStyle,
+    Setting
   },
   data() {
     return {

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

@@ -0,0 +1,529 @@
+<template>
+  <Sidebar ref="sidebar" :title="$t('setting.title')">
+    <div class="sidebarContent" :class="{ isDark: isDark }" v-if="data">
+      <!-- 水印 -->
+      <div class="title noTop">{{ $t('setting.watermark') }}</div>
+      <div class="row">
+        <!-- 是否显示水印 -->
+        <div class="rowItem">
+          <el-checkbox
+            v-model="watermarkConfig.show"
+            @change="watermarkShowChange"
+            >{{ $t('setting.showWatermark') }}</el-checkbox
+          >
+        </div>
+      </div>
+      <template v-if="watermarkConfig.show">
+        <!-- 是否仅在导出时显示 -->
+        <div class="row">
+          <div class="rowItem">
+            <el-checkbox
+              v-model="watermarkConfig.onlyExport"
+              @change="updateWatermarkConfig"
+              >{{ $t('setting.onlyExport') }}</el-checkbox
+            >
+          </div>
+        </div>
+        <!-- 是否在节点下方 -->
+        <div class="row">
+          <div class="rowItem">
+            <el-checkbox
+              v-model="watermarkConfig.belowNode"
+              @change="updateWatermarkConfig"
+              >{{ $t('setting.belowNode') }}</el-checkbox
+            >
+          </div>
+        </div>
+        <!-- 水印文字 -->
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">{{ $t('setting.watermarkText') }}</span>
+            <el-input
+              v-model="watermarkConfig.text"
+              size="small"
+              @change="updateWatermarkConfig"
+              @keydown.native.stop
+            ></el-input>
+          </div>
+        </div>
+        <!-- 水印文字颜色 -->
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">{{ $t('setting.watermarkTextColor') }}</span>
+            <span
+              class="block"
+              v-popover:popover3
+              :style="{ backgroundColor: watermarkConfig.textStyle.color }"
+            ></span>
+            <el-popover ref="popover3" placement="bottom" trigger="click">
+              <Color
+                :color="watermarkConfig.textStyle.color"
+                @change="
+                  value => {
+                    watermarkConfig.textStyle.color = value
+                    updateWatermarkConfig()
+                  }
+                "
+              ></Color>
+            </el-popover>
+          </div>
+        </div>
+        <!-- 水印文字透明度 -->
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">{{ $t('setting.watermarkTextOpacity') }}</span>
+            <el-slider
+              v-model="watermarkConfig.textStyle.opacity"
+              style="width: 170px"
+              :min="0"
+              :max="1"
+              :step="0.1"
+              @change="updateWatermarkConfig"
+            ></el-slider>
+          </div>
+        </div>
+        <!-- 水印文字字号 -->
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">{{ $t('setting.watermarkTextFontSize') }}</span>
+            <el-input-number
+              v-model="watermarkConfig.textStyle.fontSize"
+              size="small"
+              :min="0"
+              :max="50"
+              :step="1"
+              @change="updateWatermarkConfig"
+              @keydown.native.stop
+            ></el-input-number>
+          </div>
+        </div>
+        <!-- 旋转角度 -->
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">{{ $t('setting.watermarkAngle') }}</span>
+            <el-input-number
+              v-model="watermarkConfig.angle"
+              size="small"
+              :min="0"
+              :max="90"
+              :step="10"
+              @change="updateWatermarkConfig"
+              @keydown.native.stop
+            ></el-input-number>
+          </div>
+        </div>
+        <!-- 水印行间距 -->
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">{{ $t('setting.watermarkLineSpacing') }}</span>
+            <el-input-number
+              v-model="watermarkConfig.lineSpacing"
+              size="small"
+              :step="10"
+              @change="updateWatermarkConfig"
+              @keydown.native.stop
+            ></el-input-number>
+          </div>
+        </div>
+        <!-- 水印文字间距 -->
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">{{ $t('setting.watermarkTextSpacing') }}</span>
+            <el-input-number
+              v-model="watermarkConfig.textSpacing"
+              size="small"
+              :step="10"
+              @change="updateWatermarkConfig"
+              @keydown.native.stop
+            ></el-input-number>
+          </div>
+        </div>
+      </template>
+      <!-- 配置性能模式 -->
+      <div class="row">
+        <div class="rowItem">
+          <el-checkbox
+            v-model="config.openPerformance"
+            @change="
+              value => {
+                updateOtherConfig('openPerformance', value)
+              }
+            "
+            >{{ $t('setting.openPerformance') }}</el-checkbox
+          >
+        </div>
+      </div>
+      <!-- 配置开启自由拖拽 -->
+      <div class="row">
+        <div class="rowItem">
+          <el-checkbox
+            v-model="config.enableFreeDrag"
+            @change="
+              value => {
+                updateOtherConfig('enableFreeDrag', value)
+              }
+            "
+            >{{ $t('setting.enableFreeDrag') }}</el-checkbox
+          >
+        </div>
+      </div>
+      <!-- 配置是否启用富文本编辑 -->
+      <div class="row">
+        <div class="rowItem">
+          <el-checkbox
+            v-model="enableNodeRichText"
+            @change="enableNodeRichTextChange"
+            >{{ $t('setting.isEnableNodeRichText') }}</el-checkbox
+          >
+        </div>
+      </div>
+      <!-- 配置鼠标滚轮行为 -->
+      <div class="row">
+        <div class="rowItem">
+          <span class="name">{{ $t('setting.mousewheelAction') }}</span>
+          <el-select
+            size="mini"
+            style="width: 120px"
+            v-model="config.mousewheelAction"
+            placeholder=""
+            @change="
+              value => {
+                updateOtherConfig('mousewheelAction', value)
+              }
+            "
+          >
+            <el-option :label="$t('setting.zoomView')" value="zoom"></el-option>
+            <el-option
+              :label="$t('setting.moveViewUpDown')"
+              value="move"
+            ></el-option>
+          </el-select>
+        </div>
+      </div>
+      <!-- 配置鼠标缩放行为 -->
+      <div class="row" v-if="config.mousewheelAction === 'zoom'">
+        <div class="rowItem">
+          <span class="name">{{
+            $t('setting.mousewheelZoomActionReverse')
+          }}</span>
+          <el-select
+            size="mini"
+            style="width: 120px"
+            v-model="config.mousewheelZoomActionReverse"
+            placeholder=""
+            @change="
+              value => {
+                updateOtherConfig('mousewheelZoomActionReverse', value)
+              }
+            "
+          >
+            <el-option
+              :label="$t('setting.mousewheelZoomActionReverse1')"
+              :value="false"
+            ></el-option>
+            <el-option
+              :label="$t('setting.mousewheelZoomActionReverse2')"
+              :value="true"
+            ></el-option>
+          </el-select>
+        </div>
+      </div>
+      <!-- 配置创建新节点时的行为 -->
+      <div class="row">
+        <div class="rowItem">
+          <span class="name">{{ $t('setting.createNewNodeBehavior') }}</span>
+          <el-select
+            size="mini"
+            style="width: 120px"
+            v-model="config.createNewNodeBehavior"
+            placeholder=""
+            @change="
+              value => {
+                updateOtherConfig('createNewNodeBehavior', value)
+              }
+            "
+          >
+            <el-option
+              :label="$t('setting.default')"
+              value="default"
+            ></el-option>
+            <el-option
+              :label="$t('setting.notActive')"
+              value="notActive"
+            ></el-option>
+            <el-option
+              :label="$t('setting.activeOnly')"
+              value="activeOnly"
+            ></el-option>
+          </el-select>
+        </div>
+      </div>
+      <!-- 是否开启文本编辑时实时更新节点大小 -->
+      <div class="row">
+        <div class="rowItem">
+          <el-checkbox
+            v-model="config.openRealtimeRenderOnNodeTextEdit"
+            @change="
+              updateOtherConfig('openRealtimeRenderOnNodeTextEdit', $event)
+            "
+            >{{ $t('setting.openRealtimeRenderOnNodeTextEdit') }}</el-checkbox
+          >
+        </div>
+      </div>
+      <!-- 是否显示滚动条 -->
+      <div class="row">
+        <div class="rowItem">
+          <el-checkbox
+            v-model="localConfigs.isShowScrollbar"
+            @change="updateLocalConfig('isShowScrollbar', $event)"
+            >{{ $t('setting.isShowScrollbar') }}</el-checkbox
+          >
+        </div>
+      </div>
+      <!-- 是否开启手绘风格 -->
+      <div class="row" v-if="supportHandDrawnLikeStyle">
+        <div class="rowItem">
+          <el-checkbox
+            v-model="localConfigs.isUseHandDrawnLikeStyle"
+            @change="updateLocalConfig('isUseHandDrawnLikeStyle', $event)"
+            >{{ $t('setting.isUseHandDrawnLikeStyle') }}</el-checkbox
+          >
+        </div>
+      </div>
+    </div>
+  </Sidebar>
+</template>
+
+<script>
+import Sidebar from './Sidebar'
+import { storeConfig } from '@/api'
+import { mapState, mapMutations } from 'vuex'
+import Color from './Color'
+
+export default {
+  components: {
+    Sidebar,
+    Color
+  },
+  props: {
+    data: {
+      type: [Object, null],
+      default: null
+    },
+    mindMap: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      config: {
+        openPerformance: false,
+        enableFreeDrag: false,
+        mousewheelAction: 'zoom',
+        mousewheelZoomActionReverse: false,
+        createNewNodeBehavior: 'default',
+        openRealtimeRenderOnNodeTextEdit: true
+      },
+      watermarkConfig: {
+        show: false,
+        onlyExport: false,
+        text: '',
+        lineSpacing: 100,
+        textSpacing: 100,
+        angle: 30,
+        textStyle: {
+          color: '',
+          opacity: 0,
+          fontSize: 1
+        }
+      },
+      updateWatermarkTimer: null,
+      enableNodeRichText: true,
+      localConfigs: {
+        isShowScrollbar: false,
+        isUseHandDrawnLikeStyle: false
+      }
+    }
+  },
+  computed: {
+    ...mapState({
+      activeSidebar: state => state.activeSidebar,
+      localConfig: state => state.localConfig,
+      isDark: state => state.localConfig.isDark,
+      supportHandDrawnLikeStyle: state => state.supportHandDrawnLikeStyle
+    })
+  },
+  watch: {
+    activeSidebar(val) {
+      if (val === 'setting') {
+        this.$refs.sidebar.show = true
+        this.initConfig()
+        this.initWatermark()
+      } else {
+        this.$refs.sidebar.show = false
+      }
+    }
+  },
+  created() {
+    this.initLoacalConfig()
+  },
+  beforeDestroy() {},
+  methods: {
+    ...mapMutations(['setLocalConfig']),
+
+    // 初始化其他配置
+    initConfig() {
+      ;[
+        'openPerformance',
+        'enableFreeDrag',
+        'mousewheelAction',
+        'mousewheelZoomActionReverse',
+        'createNewNodeBehavior',
+        'openRealtimeRenderOnNodeTextEdit'
+      ].forEach(key => {
+        this.config[key] = this.mindMap.getConfig(key)
+      })
+    },
+
+    // 初始化本地配置
+    initLoacalConfig() {
+      this.enableNodeRichText = this.localConfig.openNodeRichText
+      this.mousewheelAction = this.localConfig.mousewheelAction
+      this.mousewheelZoomActionReverse = this.localConfig.mousewheelZoomActionReverse
+      ;['isShowScrollbar', 'isUseHandDrawnLikeStyle'].forEach(key => {
+        this.localConfigs[key] = this.localConfig[key]
+      })
+    },
+
+    // 初始化水印配置
+    initWatermark() {
+      const config = this.mindMap.getConfig('watermarkConfig')
+      ;['text', 'lineSpacing', 'textSpacing', 'angle', 'onlyExport'].forEach(
+        key => {
+          this.watermarkConfig[key] = config[key]
+        }
+      )
+      this.watermarkConfig.show = !!config.text
+      this.watermarkConfig.textStyle = { ...config.textStyle }
+    },
+
+    // 更新其他配置
+    updateOtherConfig(key, value) {
+      this.mindMap.updateConfig({
+        [key]: value
+      })
+      this.data.config = this.data.config || {}
+      this.data.config[key] = value
+      storeConfig({
+        config: this.data.config
+      })
+    },
+
+    // 更新水印配置
+    updateWatermarkConfig() {
+      clearTimeout(this.updateWatermarkTimer)
+      this.updateWatermarkTimer = setTimeout(() => {
+        let { show, ...config } = this.watermarkConfig
+        this.mindMap.watermark.updateWatermark({
+          ...config
+        })
+        this.data.config = this.data.config || {}
+        this.data.config.watermarkConfig = this.mindMap.getConfig(
+          'watermarkConfig'
+        )
+        storeConfig({
+          config: this.data.config
+        })
+      }, 300)
+    },
+
+    // 切换显示水印与否
+    watermarkShowChange(value) {
+      if (value) {
+        let text =
+          this.watermarkConfig.text || this.$t('setting.watermarkDefaultText')
+        this.watermarkConfig.text = text
+      } else {
+        this.watermarkConfig.text = ''
+      }
+      this.updateWatermarkConfig()
+    },
+
+    // 切换是否开启节点富文本编辑
+    enableNodeRichTextChange(e) {
+      this.mindMap.renderer.textEdit.hideEditTextBox()
+      this.setLocalConfig({
+        openNodeRichText: e
+      })
+    },
+
+    // 本地配置
+    updateLocalConfig(key, value) {
+      this.setLocalConfig({
+        [key]: value
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.sidebarContent {
+  padding: 20px;
+  padding-top: 10px;
+
+  &.isDark {
+    .title {
+      color: #fff;
+    }
+
+    .row {
+      .rowItem {
+        .name {
+          color: hsla(0, 0%, 100%, 0.6);
+        }
+      }
+    }
+  }
+
+  .title {
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: rgba(26, 26, 26, 0.9);
+    margin-bottom: 10px;
+    margin-top: 20px;
+
+    &.noTop {
+      margin-top: 0;
+    }
+  }
+
+  .row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    .rowItem {
+      display: flex;
+      align-items: center;
+      margin-bottom: 5px;
+
+      .name {
+        font-size: 12px;
+        margin-right: 10px;
+        white-space: nowrap;
+      }
+
+      .block {
+        display: inline-block;
+        width: 30px;
+        height: 30px;
+        border: 1px solid #dcdfe6;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>