From a4ef09779df0ec0cd97789d3059b4e09d25dae1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com> Date: Wed, 23 Oct 2024 18:11:48 +0800 Subject: [PATCH] =?UTF-8?q?Demo=EF=BC=9A=E5=B0=86=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E7=B1=BB=E7=9A=84=E9=85=8D=E7=BD=AE=E4=BB=8E=E5=9F=BA=E7=A1=80?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=A7=BB=E5=88=B0=E5=8D=95=E7=8B=AC=E7=9A=84?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E6=A0=8F=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/src/core/render/node/Style.js | 2 +- web/src/config/en.js | 5 + web/src/config/zh.js | 5 + web/src/config/zhtw.js | 5 + web/src/lang/en_us.js | 66 ++- web/src/lang/zh_cn.js | 66 +-- web/src/lang/zh_tw.js | 65 ++- web/src/pages/Edit/components/BaseStyle.vue | 440 +-------------- web/src/pages/Edit/components/Edit.vue | 5 +- web/src/pages/Edit/components/Setting.vue | 529 ++++++++++++++++++ 10 files changed, 656 insertions(+), 532 deletions(-) create mode 100644 web/src/pages/Edit/components/Setting.vue diff --git a/simple-mind-map/src/core/render/node/Style.js b/simple-mind-map/src/core/render/node/Style.js index e038793b..68a38fc6 100644 --- a/simple-mind-map/src/core/render/node/Style.js +++ b/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 = {} diff --git a/web/src/config/en.js b/web/src/config/en.js index d3e12f6b..b4206eee 100644 --- a/web/src/config/en.js +++ b/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', diff --git a/web/src/config/zh.js b/web/src/config/zh.js index f3976db3..c4fa256e 100644 --- a/web/src/config/zh.js +++ b/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', diff --git a/web/src/config/zhtw.js b/web/src/config/zhtw.js index b1ad1f0f..ab67680b 100644 --- a/web/src/config/zhtw.js +++ b/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', diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js index c5a8f01f..3301fd1d 100644 --- a/web/src/lang/en_us.js +++ b/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' diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js index 3c6371aa..bce021f8 100644 --- a/web/src/lang/zh_cn.js +++ b/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: '更多颜色' diff --git a/web/src/lang/zh_tw.js b/web/src/lang/zh_tw.js index 66fc458b..78d30e9f 100644 --- a/web/src/lang/zh_tw.js +++ b/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: '更多顏色' diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue index 750b67bb..4fc8b5ec 100644 --- a/web/src/pages/Edit/components/BaseStyle.vue +++ b/web/src/pages/Edit/components/BaseStyle.vue @@ -714,146 +714,6 @@ > - -
{{ $t('baseStyle.watermark') }}
-
- -
- {{ $t('baseStyle.showWatermark') }} -
-
-
{{ $t('baseStyle.outerFramePadding') }}
@@ -884,162 +744,6 @@ >
- -
{{ $t('baseStyle.otherConfig') }}
- -
-
- {{ $t('baseStyle.openPerformance') }} -
-
- -
-
- {{ $t('baseStyle.enableFreeDrag') }} -
-
- -
-
- {{ $t('baseStyle.isEnableNodeRichText') }} -
-
- -
-
- {{ $t('baseStyle.mousewheelAction') }} - - - - -
-
- -
-
- {{ - $t('baseStyle.mousewheelZoomActionReverse') - }} - - - - -
-
- -
-
- {{ $t('baseStyle.createNewNodeBehavior') }} - - - - - -
-
- -
-
- {{ $t('baseStyle.openRealtimeRenderOnNodeTextEdit') }} -
-
- -
-
- {{ $t('baseStyle.isShowScrollbar') }} -
-
- -
-
- {{ $t('baseStyle.isUseHandDrawnLikeStyle') }} -
-
@@ -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 - }) } } } diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index 8ed12d78..2f8d8c35 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/web/src/pages/Edit/components/Edit.vue @@ -38,6 +38,7 @@ +
+ +
+ +
{{ $t('setting.watermark') }}
+
+ +
+ {{ $t('setting.showWatermark') }} +
+
+ + +
+
+ {{ $t('setting.openPerformance') }} +
+
+ +
+
+ {{ $t('setting.enableFreeDrag') }} +
+
+ +
+
+ {{ $t('setting.isEnableNodeRichText') }} +
+
+ +
+
+ {{ $t('setting.mousewheelAction') }} + + + + +
+
+ +
+
+ {{ + $t('setting.mousewheelZoomActionReverse') + }} + + + + +
+
+ +
+
+ {{ $t('setting.createNewNodeBehavior') }} + + + + + +
+
+ +
+
+ {{ $t('setting.openRealtimeRenderOnNodeTextEdit') }} +
+
+ +
+
+ {{ $t('setting.isShowScrollbar') }} +
+
+ +
+
+ {{ $t('setting.isUseHandDrawnLikeStyle') }} +
+
+
+ + + + + +