From 4614a87bdd87292c0054945aad338913d94b81ef 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: Mon, 25 Mar 2024 15:03:53 +0800 Subject: [PATCH] =?UTF-8?q?Demo=EF=BC=9A=E6=94=AF=E6=8C=81=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E5=BD=A9=E8=99=B9=E7=BA=BF=E6=9D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/config/constant.js | 81 +++++++++++- web/src/config/zh.js | 4 +- web/src/lang/en_us.js | 4 +- web/src/lang/zh_cn.js | 4 +- web/src/pages/Edit/components/BaseStyle.vue | 137 +++++++++++++++++++- web/src/pages/Edit/components/Edit.vue | 2 + 6 files changed, 225 insertions(+), 7 deletions(-) diff --git a/web/src/config/constant.js b/web/src/config/constant.js index fa9e22e1..d47d5c48 100644 --- a/web/src/config/constant.js +++ b/web/src/config/constant.js @@ -57,7 +57,7 @@ export const themeMap = { dark4: require('../assets/img/themes/dark4.jpg'), cactus: require('../assets/img/themes/cactus.jpg'), classic6: require('../assets/img/themes/classic6.jpg'), - classic7: require('../assets/img/themes/classic7.jpg'), + classic7: require('../assets/img/themes/classic7.jpg') } // 公式列表 @@ -111,3 +111,82 @@ export const supportRootLineKeepSameInCurveLayouts = [ 'logicalStructure', 'mindMap' ] + +// 彩虹线条配置 +export const rainbowLinesOptions = [ + { + value: 'close' + }, + { + value: 'colors1', + list: [ + 'rgb(255, 213, 73)', + 'rgb(255, 136, 126)', + 'rgb(107, 225, 141)', + 'rgb(151, 171, 255)', + 'rgb(129, 220, 242)', + 'rgb(255, 163, 125)', + 'rgb(152, 132, 234)' + ] + }, + { + value: 'colors2', + list: [ + 'rgb(248, 93, 93)', + 'rgb(255, 151, 84)', + 'rgb(255, 214, 69)', + 'rgb(73, 205, 140)', + 'rgb(64, 192, 255)', + 'rgb(84, 110, 214)', + 'rgb(164, 93, 220)' + ] + }, + { + value: 'colors3', + list: [ + 'rgb(140, 240, 231)', + 'rgb(74, 210, 255)', + 'rgb(65, 168, 243)', + 'rgb(49, 128, 205)', + 'rgb(188, 226, 132)', + 'rgb(113, 215, 123)', + 'rgb(120, 191, 109)' + ] + }, + { + value: 'colors4', + list: [ + 'rgb(169, 98, 99)', + 'rgb(245, 125, 123)', + 'rgb(254, 183, 168)', + 'rgb(251, 218, 171)', + 'rgb(138, 163, 181)', + 'rgb(131, 127, 161)', + 'rgb(84, 83, 140)' + ] + }, + { + value: 'colors5', + list: [ + 'rgb(255, 229, 142)', + 'rgb(254, 158, 41)', + 'rgb(248, 119, 44)', + 'rgb(232, 82, 80)', + 'rgb(182, 66, 98)', + 'rgb(99, 54, 99)', + 'rgb(65, 40, 82)' + ] + }, + { + value: 'colors6', + list: [ + 'rgb(171, 227, 209)', + 'rgb(107, 201, 196)', + 'rgb(55, 170, 169)', + 'rgb(18, 135, 131)', + 'rgb(74, 139, 166)', + 'rgb(75, 105, 150)', + 'rgb(57, 75, 133)' + ] + } +] diff --git a/web/src/config/zh.js b/web/src/config/zh.js index c9ce9177..9daaef15 100644 --- a/web/src/config/zh.js +++ b/web/src/config/zh.js @@ -425,7 +425,7 @@ export const shortcutKeyList = [ icon: 'icondodeparent', name: '上移一个层级', value: 'Shift + Tab' - }, + } ] } ] @@ -582,4 +582,4 @@ export const downTypeList = [ icon: 'iconTXT', desc: '纯文本文件' } -] +] \ No newline at end of file diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js index 28b40d6c..7f48c5dc 100644 --- a/web/src/lang/en_us.js +++ b/web/src/lang/en_us.js @@ -62,7 +62,9 @@ export default { isUseHandDrawnLikeStyle: 'Is use hand drawn like style', rootLineStartPos: 'Root line start pos', center: 'Center', - right: 'Right' + right: 'Right', + rainbowLines: 'Rainbow lines', + notUseRainbowLines: 'Not use rainbow lines' }, color: { moreColor: 'More color' diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js index fa7458c6..09ca7cad 100644 --- a/web/src/lang/zh_cn.js +++ b/web/src/lang/zh_cn.js @@ -62,7 +62,9 @@ export default { isUseHandDrawnLikeStyle: '是否开启手绘风格', rootLineStartPos: '根节点连线起始位置', center: '中心', - right: '右侧' + right: '右侧', + rainbowLines: '彩虹线条', + notUseRainbowLines: '不使用彩虹线条' }, color: { moreColor: '更多颜色' diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue index 3fc5be0c..25265f29 100644 --- a/web/src/pages/Edit/components/BaseStyle.vue +++ b/web/src/pages/Edit/components/BaseStyle.vue @@ -273,6 +273,50 @@ > + +
{{ $t('baseStyle.rainbowLines') }}
+
+
+ +
+
+
+ +
+ {{ + $t('baseStyle.notUseRainbowLines') + }} +
+
+
+
+ +
+ {{ $t('baseStyle.notUseRainbowLines') }} +
+ +
+
{{ $t('baseStyle.lineOfOutline') }}
@@ -914,7 +958,8 @@ import { supportLineStyleLayoutsMap, supportLineRadiusLayouts, supportNodeUseLineStyleLayouts, - supportRootLineKeepSameInCurveLayouts + supportRootLineKeepSameInCurveLayouts, + rainbowLinesOptions } from '@/config/constant' /** @@ -940,6 +985,7 @@ export default { }, data() { return { + rainbowLinesOptions, lineWidthList, fontSizeList, activeTab: 'color', @@ -994,6 +1040,8 @@ export default { fontSize: 1 } }, + rainbowLinesPopoverVisible: false, + curRainbowLineColorList: null, updateWatermarkTimer: null, enableNodeRichText: true, localConfigs: { @@ -1069,6 +1117,7 @@ export default { this.initStyle() this.initConfig() this.initWatermark() + this.initRainbowLines() this.currentLayout = this.mindMap.getLayout() } else { this.$refs.sidebar.show = false @@ -1180,6 +1229,16 @@ export default { this.watermarkConfig.textStyle = { ...config.textStyle } }, + // 初始化彩虹线条配置 + initRainbowLines() { + const config = this.mindMap.getConfig('rainbowLinesConfig') || {} + this.curRainbowLineColorList = config.open + ? this.mindMap.rainbowLines + ? this.mindMap.rainbowLines.getColorsList() + : null + : null + }, + /** * @Author: 王林 * @Date: 2021-07-03 22:27:32 @@ -1245,6 +1304,29 @@ export default { }, 300) }, + // 更新彩虹线条配置 + updateRainbowLinesConfig(item) { + this.rainbowLinesPopoverVisible = false + this.curRainbowLineColorList = item.list || null + this.data.config = this.data.config || {} + let newConfig = null + if (item.list) { + newConfig = { + open: true, + colorsList: item.list + } + } else { + newConfig = { + open: false + } + } + this.data.config.rainbowLinesConfig = newConfig + this.mindMap.rainbowLines.updateRainLinesConfig(newConfig) + storeConfig({ + config: this.data.config + }) + }, + // 设置margin updateMargin(type, value) { this.style[type] = value @@ -1303,7 +1385,8 @@ export default { .row { .rowItem { - .name { + .name, + .curRainbowLine { color: hsla(0, 0%, 100%, 0.6); } } @@ -1365,6 +1448,17 @@ export default { border-radius: 4px; cursor: pointer; } + + .curRainbowLine { + height: 24px; + border: 1px solid #dcdfe6; + font-size: 12px; + width: 240px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + } } .styleBtn { @@ -1437,4 +1531,43 @@ export default { } } } + +.rainbowLinesOptionsBox { + width: 200px; + + &.isDark { + .optionItem { + color: hsla(0, 0%, 100%, 0.6); + + &:hover { + background-color: hsla(0, 0%, 100%, 0.05); + } + } + } + + .optionItem { + width: 100%; + height: 30px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + background-color: #f5f7fa; + } + } +} + +.colorsBar { + display: flex; + width: 100%; + height: 100%; + align-items: center; + + .colorItem { + flex: 1; + height: 15px; + } +} diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index 0fae330d..205b8208 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/web/src/pages/Edit/components/Edit.vue @@ -45,6 +45,7 @@ import SearchPlugin from 'simple-mind-map/src/plugins/Search.js' import Painter from 'simple-mind-map/src/plugins/Painter.js' import ScrollbarPlugin from 'simple-mind-map/src/plugins/Scrollbar.js' import Formula from 'simple-mind-map/src/plugins/Formula.js' +import RainbowLines from 'simple-mind-map/src/plugins/RainbowLines.js' // 协同编辑插件 // import Cooperate from 'simple-mind-map/src/plugins/Cooperate.js' // 手绘风格插件，该插件为付费插件，详情请查看开发文档 @@ -98,6 +99,7 @@ MindMap.usePlugin(MiniMap) .usePlugin(SearchPlugin) .usePlugin(Painter) .usePlugin(Formula) + .usePlugin(RainbowLines) // .usePlugin(Cooperate) // 协同插件 // 注册自定义主题