diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json index 950399a2..ccd5d0c9 100644 --- a/simple-mind-map/package.json +++ b/simple-mind-map/package.json @@ -1,6 +1,6 @@ { "name": "simple-mind-map", - "version": "0.5.3-fix.2", + "version": "0.5.4", "description": "一个简单的web在线思维导图", "authors": [ { diff --git a/simple-mind-map/src/themes/blackGold.js b/simple-mind-map/src/themes/blackGold.js new file mode 100644 index 00000000..d694fe15 --- /dev/null +++ b/simple-mind-map/src/themes/blackGold.js @@ -0,0 +1,57 @@ +import defaultTheme from './default' +import merge from 'deepmerge' + +// 黑金 +export default merge(defaultTheme, { + // 背景颜色 + backgroundColor: 'rgb(18, 20, 20)', + // 连线的颜色 + lineColor: 'rgb(205, 186, 156)', + lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(245, 224, 191)', + // 根节点样式 + root: { + fillColor: 'rgb(255, 208, 124)', + color: 'rgb(111, 61, 6)', + borderColor: '', + borderWidth: 0, + fontSize: 24, + active: { + borderColor: '#fff', + borderWidth: 3 + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(66, 57, 46)', + color: 'rgb(225, 201, 158)', + borderColor: 'rgb(245, 224, 191)', + borderWidth: 2, + fontSize: 18, + active: { + borderColor: 'rgb(255, 208, 124)' + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(231, 203, 155)', + active: { + borderColor: 'rgb(255, 208, 124)' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: 'rgb(56, 45, 34)', + borderColor: 'rgb(104, 84, 61)', + borderWidth: 2, + color: 'rgb(242, 216, 176)', + active: { + borderColor: 'rgb(255, 208, 124)' + } + } +}) diff --git a/simple-mind-map/src/themes/blackHumour.js b/simple-mind-map/src/themes/blackHumour.js new file mode 100644 index 00000000..e219ff98 --- /dev/null +++ b/simple-mind-map/src/themes/blackHumour.js @@ -0,0 +1,58 @@ +import defaultTheme from './default' +import merge from 'deepmerge' + +// 黑色幽默 +export default merge(defaultTheme, { + // 背景颜色 + backgroundColor: 'rgb(27, 31, 34)', + // 连线的颜色 + lineColor: 'rgb(75, 81, 78)', + lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(255, 119, 34)', + // 根节点样式 + root: { + fillColor: 'rgb(36, 179, 96)', + color: '#fff', + borderColor: '', + borderWidth: 0, + fontSize: 24, + active: { + borderColor: 'rgb(254, 199, 13)', + borderWidth: 3 + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(254, 199, 13)', + color: 'rgb(0, 0, 0)', + borderColor: '', + borderWidth: 0, + fontSize: 18, + active: { + borderColor: 'rgb(36, 179, 96)', + borderWidth: 3 + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(204, 204, 204)', + active: { + borderColor: 'rgb(254, 199, 13)' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: 'rgb(27, 31, 34)', + borderColor: 'rgb(255, 119, 34)', + borderWidth: 2, + color: 'rgb(204, 204, 204)', + active: { + borderColor: 'rgb(36, 179, 96)' + } + } +}) diff --git a/simple-mind-map/src/themes/coffee.js b/simple-mind-map/src/themes/coffee.js new file mode 100644 index 00000000..792a3389 --- /dev/null +++ b/simple-mind-map/src/themes/coffee.js @@ -0,0 +1,55 @@ +import defaultTheme from './default' +import merge from 'deepmerge' + +// 咖啡 +export default merge(defaultTheme, { + // 连线的颜色 + lineColor: 'rgb(173, 123, 91)', + lineWidth: 4, + // 概要连线的粗细 + generalizationLineWidth: 4, + // 概要连线的颜色 + generalizationLineColor: 'rgb(173, 123, 91)', + // 根节点样式 + root: { + fillColor: 'rgb(202, 117, 79)', + color: '#fff', + borderColor: '', + borderWidth: 0, + fontSize: 24, + active: { + borderColor: 'rgb(173, 123, 91)', + borderWidth: 3 + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(245, 231, 216)', + color: 'rgb(125, 86, 42)', + borderColor: '', + borderWidth: 0, + fontSize: 18, + active: { + borderColor: 'rgb(173, 123, 91)' + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(96, 71, 47)', + active: { + borderColor: 'rgb(173, 123, 91)' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: 'rgb(255, 249, 239)', + borderColor: 'rgb(173, 123, 91)', + borderWidth: 2, + color: 'rgb(122, 83, 44)', + active: { + borderColor: 'rgb(202, 117, 79)' + } + } +}) diff --git a/simple-mind-map/src/themes/courseGreen.js b/simple-mind-map/src/themes/courseGreen.js new file mode 100644 index 00000000..78e50978 --- /dev/null +++ b/simple-mind-map/src/themes/courseGreen.js @@ -0,0 +1,55 @@ +import defaultTheme from './default' +import merge from 'deepmerge' + +// 课程绿 +export default merge(defaultTheme, { + // 连线的颜色 + lineColor: 'rgb(113, 195, 169)', + lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(113, 195, 169)', + // 根节点样式 + root: { + fillColor: 'rgb(16, 160, 121)', + color: '#fff', + borderColor: '', + borderWidth: 0, + fontSize: 24, + active: { + borderColor: 'rgb(173, 91, 12)', + borderWidth: 3 + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(240, 252, 249)', + color: 'rgb(50, 113, 96)', + borderColor: 'rgb(113, 195, 169)', + borderWidth: 2, + fontSize: 18, + active: { + borderColor: 'rgb(173, 91, 12)' + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(10, 59, 43)', + active: { + borderColor: 'rgb(173, 91, 12)' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: 'rgb(246, 238, 211)', + borderColor: '', + borderWidth: 0, + color: 'rgb(173, 91, 12)', + active: { + borderColor: 'rgb(113, 195, 169)' + } + } +}) diff --git a/simple-mind-map/src/themes/index.js b/simple-mind-map/src/themes/index.js index dd0bd3f8..b84e1157 100644 --- a/simple-mind-map/src/themes/index.js +++ b/simple-mind-map/src/themes/index.js @@ -20,6 +20,13 @@ import vitalityOrange from './vitalityOrange' import greenLeaf from './greenLeaf' import dark2 from './dark2' import skyGreen from './skyGreen' +import simpleBlack from './simpleBlack' +import courseGreen from './courseGreen' +import coffee from './coffee' +import redSpirit from './redSpirit' +import blackHumour from './blackHumour' +import lateNightOffice from './lateNightOffice' +import blackGold from './blackGold' export default { default: defaultTheme, @@ -43,5 +50,12 @@ export default { vitalityOrange, greenLeaf, dark2, - skyGreen + skyGreen, + simpleBlack, + courseGreen, + coffee, + redSpirit, + blackHumour, + lateNightOffice, + blackGold } diff --git a/simple-mind-map/src/themes/lateNightOffice.js b/simple-mind-map/src/themes/lateNightOffice.js new file mode 100644 index 00000000..34cec1a3 --- /dev/null +++ b/simple-mind-map/src/themes/lateNightOffice.js @@ -0,0 +1,58 @@ +import defaultTheme from './default' +import merge from 'deepmerge' + +// 深夜办公室 +export default merge(defaultTheme, { + // 背景颜色 + backgroundColor: 'rgb(32, 37, 49)', + // 连线的颜色 + lineColor: 'rgb(137, 167, 196)', + lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(255, 119, 34)', + // 根节点样式 + root: { + fillColor: 'rgb(23, 153, 243)', + color: 'rgb(255, 255, 255)', + borderColor: '', + borderWidth: 0, + fontSize: 24, + active: { + borderColor: 'rgb(255, 119, 34)', + borderWidth: 3 + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(70, 78, 94)', + color: 'rgb(209, 210, 210)', + borderColor: '', + borderWidth: 0, + fontSize: 18, + active: { + borderColor: 'rgb(255, 119, 34)', + borderWidth: 3 + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(204, 204, 204)', + active: { + borderColor: 'rgb(255, 119, 34)' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: 'rgb(255, 119, 34)', + borderColor: '', + borderWidth: 2, + color: '#fff', + active: { + borderColor: 'rgb(23, 153, 243)' + } + } +}) diff --git a/simple-mind-map/src/themes/redSpirit.js b/simple-mind-map/src/themes/redSpirit.js new file mode 100644 index 00000000..0ee103c3 --- /dev/null +++ b/simple-mind-map/src/themes/redSpirit.js @@ -0,0 +1,57 @@ +import defaultTheme from './default' +import merge from 'deepmerge' + +// 红色精神 +export default merge(defaultTheme, { + // 背景颜色 + backgroundColor: 'rgb(255, 238, 228)', + // 连线的颜色 + lineColor: 'rgb(230, 138, 131)', + lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(222, 101, 85)', + // 根节点样式 + root: { + fillColor: 'rgb(207, 44, 44)', + color: 'rgb(255, 233, 157)', + borderColor: '', + borderWidth: 0, + fontSize: 24, + active: { + borderColor: 'rgb(255, 233, 157)', + borderWidth: 3 + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(255, 255, 255)', + color: 'rgb(211, 58, 21)', + borderColor: 'rgb(222, 101, 85)', + borderWidth: 2, + fontSize: 18, + active: { + borderColor: 'rgb(255, 233, 157)' + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(144, 71, 43)', + active: { + borderColor: 'rgb(255, 233, 157)' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: 'rgb(255, 247, 211)', + borderColor: 'rgb(255, 202, 162)', + borderWidth: 2, + color: 'rgb(187, 101, 69)', + active: { + borderColor: 'rgb(222, 101, 85)' + } + } +}) diff --git a/simple-mind-map/src/themes/simpleBlack.js b/simple-mind-map/src/themes/simpleBlack.js new file mode 100644 index 00000000..6a04c827 --- /dev/null +++ b/simple-mind-map/src/themes/simpleBlack.js @@ -0,0 +1,54 @@ +import defaultTheme from './default' +import merge from 'deepmerge' + +// 简约黑 +export default merge(defaultTheme, { + // 连线的颜色 + lineColor: 'rgb(34, 34, 34)', + lineWidth: 4, + // 概要连线的粗细 + generalizationLineWidth: 4, + // 概要连线的颜色 + generalizationLineColor: 'rgb(34, 34, 34)', + // 根节点样式 + root: { + fillColor: '#fff', + color: 'rgb(34, 34, 34)', + borderColor: 'rgb(34, 34, 34)', + borderWidth: 3, + fontSize: 24, + active: { + borderColor: '#a13600' + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(241, 246, 248)', + color: 'rgb(34, 34, 34)', + borderColor: 'rgb(34, 34, 34)', + borderWidth: 3, + fontSize: 18, + active: { + borderColor: '#a13600' + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(34, 34, 34)', + active: { + borderColor: '#a13600' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: 'transparent', + borderColor: 'rgb(34, 34, 34)', + borderWidth: 2, + color: 'rgb(34, 34, 34)', + active: { + borderColor: '#a13600' + } + } +}) diff --git a/simple-mind-map/src/utils/constant.js b/simple-mind-map/src/utils/constant.js index dc725247..da156f31 100644 --- a/simple-mind-map/src/utils/constant.js +++ b/simple-mind-map/src/utils/constant.js @@ -111,6 +111,34 @@ export const themeList = [ { name: '浪漫紫', value: 'romanticPurple', + }, + { + name: '简约黑', + value: 'simpleBlack', + }, + { + name: '课程绿', + value: 'courseGreen', + }, + { + name: '咖啡', + value: 'coffee', + }, + { + name: '红色精神', + value: 'redSpirit', + }, + { + name: '黑色幽默', + value: 'blackHumour', + }, + { + name: '深夜办公室', + value: 'lateNightOffice', + }, + { + name: '黑金', + value: 'blackGold', } ]