coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-26 04:47:42 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

修改及新增主题

Browse Source
This commit is contained in:
wanglin 2022-07-31 14:54:32 +08:00
parent 2d8643015f
commit 7f79d4881d
25 changed files with 335 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
simple-mind-map/src/Render.js
View File

@ -189,6 +189,8 @@ class Render {
this.mindMap.execCommand('INSERT_NODE')
}
this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
// 插入概要
this.mindMap.keyCommand.addShortcut('Shift+s', this.addGeneralization)
// 展开/收起节点
this.mindMap.keyCommand.addShortcut('/', () => {
this.activeNodeList.forEach((node) => {

BIN
simple-mind-map/src/assets/classic4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

13
simple-mind-map/src/themes/blueSky.js
View File

@ -11,6 +11,10 @@ export default merge(defaultTheme, {
lineColor: 'rgb(115, 161, 191)',
// 背景颜色
backgroundColor: 'rgb(251, 251, 251)',
// 概要连线的粗细
generalizationLineWidth: 1,
// 概要连线的颜色
generalizationLineColor: '#333',
// 根节点样式
root: {
fillColor: 'rgb(115, 161, 191)',
@ -37,4 +41,13 @@ export default merge(defaultTheme, {
borderColor: 'rgb(57, 80, 96)'
}
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: '#333',
color: '#333',
active: {
borderColor: 'rgb(57, 80, 96)'
}
}
})

13
simple-mind-map/src/themes/brainImpairedPink.js
View File

@ -11,6 +11,10 @@ export default merge(defaultTheme, {
lineColor: 'rgb(191, 115, 148)',
// 背景颜色
backgroundColor: 'rgb(251, 251, 251)',
// 概要连线的粗细
generalizationLineWidth: 1,
// 概要连线的颜色
generalizationLineColor: '#333',
// 根节点样式
root: {
fillColor: 'rgb(191, 115, 148)',
@ -36,5 +40,14 @@ export default merge(defaultTheme, {
active: {
borderColor: 'rgb(96, 57, 74)'
}
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: '#333',
color: '#333',
active: {
borderColor: 'rgb(96, 57, 74)'
}
}
})

14
simple-mind-map/src/themes/classic.js
View File

@ -11,6 +11,10 @@ export default merge(defaultTheme, {
lineColor: '#fff',
// 连线的粗细
lineWidth: 3,
// 概要连线的粗细
generalizationLineWidth: 3,
// 概要连线的颜色
generalizationLineColor: '#fff',
// 背景颜色
backgroundColor: 'rgb(58, 65, 68)',
// 背景图片
@ -49,5 +53,15 @@ export default merge(defaultTheme, {
fillColor: 'rgb(254, 219, 0)',
borderColor: 'transparent'
}
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: 'transparent',
color: '#333',
active: {
fillColor: 'rgb(254, 219, 0)',
borderColor: 'transparent'
}
}
})

14
simple-mind-map/src/themes/classic2.js
View File

@ -11,6 +11,10 @@ export default merge(defaultTheme, {
lineColor: 'rgb(51, 51, 51)',
// 连线的粗细
lineWidth: 2,
// 概要连线的粗细
generalizationLineWidth: 3,
// 概要连线的颜色
generalizationLineColor: 'rgb(51, 51, 51)',
// 背景颜色
backgroundColor: '#fff',
// 根节点样式
@ -41,5 +45,15 @@ export default merge(defaultTheme, {
active: {
borderColor: 'rgb(51, 51, 51)'
}
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: 'rgb(51, 51, 51)',
borderWidth: 2,
color: '#1a1a1a',
active: {
borderColor: 'rgb(18, 187, 55)'
}
}
})

14
simple-mind-map/src/themes/classic3.js
View File

@ -11,6 +11,10 @@ export default merge(defaultTheme, {
lineColor: 'rgb(94, 202, 110)',
// 连线的粗细
lineWidth: 2,
// 概要连线的粗细
generalizationLineWidth: 3,
// 概要连线的颜色
generalizationLineColor: '#1a1a1a',
// 背景颜色
backgroundColor: 'rgb(241, 241, 241)',
// 根节点样式
@ -44,5 +48,15 @@ export default merge(defaultTheme, {
active: {
borderColor: 'rgb(94, 202, 110)'
}
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: '#1a1a1a',
color: '#1a1a1a',
borderWidth: 2,
active: {
borderColor: 'rgb(94, 202, 110)'
}
}
})

65
simple-mind-map/src/themes/classic4.js Normal file
View File

@ -0,0 +1,65 @@
import defaultTheme from './default';
import merge from 'deepmerge';
/**
* @Author: 王林
* @Date: 2021-04-11 15:22:18
* @Desc: 经典4
*/
export default merge(defaultTheme, {
// 连线的颜色
lineColor: 'rgb(30, 53, 86)',
// 连线的粗细
lineWidth: 2,
// 概要连线的粗细
generalizationLineWidth: 2,
// 概要连线的颜色
generalizationLineColor: 'rgb(56, 123, 233)',
// 背景颜色
backgroundColor: 'rgb(241, 241, 241)',
// 根节点样式
root: {
fillColor: 'rgb(30, 53, 86)',
color: '#fff',
fontSize: 24,
borderRadius: 10,
borderColor: 'rgb(189, 197, 201)',
borderWidth: 2,
active: {
borderColor: 'rgb(169, 218, 218)'
}
},
// 二级节点样式
second: {
fillColor: 'rgb(169, 218, 218)',
borderColor: 'rgb(30, 53, 86)',
borderWidth: 2,
color: '#fff',
fontSize: 18,
borderRadius: 10,
active: {
borderColor: 'rgb(56, 123, 233)'
}
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: 'rgb(30, 53, 86)',
borderColor: 'rgb(30, 53, 86)',
borderWidth: 1,
marginY: 20,
active: {
borderColor: 'rgb(169, 218, 218)'
}
},
// 概要节点样式
generalization: {
fillColor: 'rgb(56, 123, 233)',
borderColor: 'rgb(56, 123, 233)',
color: '#fff',
borderWidth: 0,
active: {
borderColor: 'rgb(169, 218, 218)'
}
}
})

13
simple-mind-map/src/themes/classicBlue.js
View File

@ -11,6 +11,10 @@ export default merge(defaultTheme, {
lineColor: 'rgb(51, 51, 51)',
// 连线的粗细
lineWidth: 2,
// 概要连线的粗细
generalizationLineWidth: 2,
// 概要连线的颜色
generalizationLineColor: 'rgb(51, 51, 51)',
// 背景颜色
backgroundColor: 'rgb(239, 248, 250)',
// 根节点样式
@ -39,5 +43,14 @@ export default merge(defaultTheme, {
active: {
borderColor: 'rgb(94, 199, 248)'
}
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: 'rgb(51, 51, 51)',
color: '#333',
active: {
borderColor: 'rgb(94, 199, 248)'
}
}
})

14
simple-mind-map/src/themes/classicGreen.js
View File

@ -11,6 +11,10 @@ export default merge(defaultTheme, {
lineColor: 'rgb(123, 199, 120)',
// 背景颜色
backgroundColor: 'rgb(236, 245, 231)',
// 概要连线的粗细
generalizationLineWidth: 2,
// 概要连线的颜色
generalizationLineColor: 'rgb(123, 199, 120)',
// 根节点样式
root: {
fillColor: 'rgb(253, 244, 217)',
@ -37,5 +41,15 @@ export default merge(defaultTheme, {
active: {
borderColor: 'rgb(94, 199, 248)'
}
},
// 概要节点样式
generalization: {
fillColor: 'rgb(123, 199, 120)',
borderColor: 'transparent',
borderWidth: 2,
color: '#fff',
active: {
borderColor: 'rgb(94, 199, 248)'
}
}
})

13
simple-mind-map/src/themes/dark.js
View File

@ -11,6 +11,10 @@ export default merge(defaultTheme, {
lineColor: 'rgb(17, 68, 23)',
// 连线的粗细
lineWidth: 2,
// 概要连线的粗细
generalizationLineWidth: 2,
// 概要连线的颜色
generalizationLineColor: '#fff',
// 背景颜色
backgroundColor: 'rgb(15, 16, 17)',
// 根节点样式
@ -41,5 +45,14 @@ export default merge(defaultTheme, {
active: {
borderColor: 'rgb(17, 68, 23)'
}
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: 'transparent',
color: '#333',
active: {
borderColor: 'rgb(17, 68, 23)'
}
}
})

14
simple-mind-map/src/themes/dark2.js
View File

@ -10,6 +10,10 @@ export default merge(defaultTheme, {
// 连线的颜色
lineColor: 'rgb(75, 81, 78)',
lineWidth: 3,
// 概要连线的粗细
generalizationLineWidth: 3,
// 概要连线的颜色
generalizationLineColor: 'rgb(255, 119, 34)',
// 背景颜色
backgroundColor: 'rgb(27, 31, 34)',
// 根节点样式
@ -42,5 +46,15 @@ export default merge(defaultTheme, {
active: {
borderColor: 'rgb(254, 199, 13)'
}
},
// 概要节点样式
generalization: {
fillColor: 'transparent',
borderColor: 'rgb(255, 119, 34)',
borderWidth: 2,
color: 'rgb(204, 204, 204)',
active: {
borderColor: 'rgb(254, 199, 13)'
}
}
})

13
simple-mind-map/src/themes/earthYellow.js
View File

@ -11,6 +11,10 @@ export default merge(defaultTheme, {
lineColor: 'rgb(191, 147, 115)',
// 背景颜色
backgroundColor: 'rgb(251, 251, 251)',
// 概要连线的粗细
generalizationLineWidth: 1,
// 概要连线的颜色
generalizationLineColor: '#333',
// 根节点样式
root: {
fillColor: 'rgb(191, 147, 115)',
@ -36,5 +40,14 @@ export default merge(defaultTheme, {
active: {
borderColor: 'rgb(96, 73, 57)'
}
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: '#333',
color: '#333',
active: {
borderColor: 'rgb(96, 73, 57)'
}
}
})

15
simple-mind-map/src/themes/freshGreen.js
View File

@ -11,6 +11,10 @@ export default merge(defaultTheme, {
lineColor: '#333',
// 背景颜色
backgroundColor: '#d1f6ec',
// 概要连线的粗细
generalizationLineWidth: 1,
// 概要连线的颜色
generalizationLineColor: '#333',
// 根节点样式
root: {
fillColor: '#1fb27d'
@ -22,4 +26,15 @@ export default merge(defaultTheme, {
borderColor: 'transparent',
borderWidth: 0
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: '#333',
color: '#333',
active: {
borderColor: 'rgb(57, 80, 96)',
borderWidth: 3,
borderDasharray: 'none',
}
}
})

13
simple-mind-map/src/themes/freshRed.js
View File

@ -11,6 +11,10 @@ export default merge(defaultTheme, {
lineColor: 'rgb(191, 115, 115)',
// 背景颜色
backgroundColor: 'rgb(251, 251, 251)',
// 概要连线的粗细
generalizationLineWidth: 1,
// 概要连线的颜色
generalizationLineColor: '#333',
// 根节点样式
root: {
fillColor: 'rgb(191, 115, 115)',
@ -36,5 +40,14 @@ export default merge(defaultTheme, {
active: {
borderColor: 'rgb(96, 57, 57)'
}
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: '#333',
color: '#333',
active: {
borderColor: 'rgb(96, 57, 57)'
}
}
})

13
simple-mind-map/src/themes/gold.js
View File

@ -10,6 +10,10 @@ export default merge(defaultTheme, {
// 连线的颜色
lineColor: 'rgb(51, 56, 62)',
lineWidth: 3,
// 概要连线的粗细
generalizationLineWidth: 3,
// 概要连线的颜色
generalizationLineColor: 'rgb(127, 93, 64)',
// 背景颜色
backgroundColor: '#fff',
// 根节点样式
@ -42,5 +46,14 @@ export default merge(defaultTheme, {
active: {
borderColor: 'rgb(0, 192, 184)'
}
},
// 概要节点样式
generalization: {
fillColor: 'rgb(127, 93, 64)',
borderColor: 'transparent',
color: 'rgb(255, 214, 175)',
active: {
borderColor: 'rgb(51, 56, 62)'
}
}
})

14
simple-mind-map/src/themes/greenLeaf.js
View File

@ -10,6 +10,10 @@ export default merge(defaultTheme, {
// 连线的颜色
lineColor: 'rgb(40, 193, 84)',
lineWidth: 3,
// 概要连线的粗细
generalizationLineWidth: 3,
// 概要连线的颜色
generalizationLineColor: 'rgb(251, 158, 0)',
// 背景颜色
backgroundColor: 'rgb(238, 255, 243)',
// 根节点样式
@ -42,5 +46,15 @@ export default merge(defaultTheme, {
active: {
borderColor: 'rgb(25, 193, 73)'
}
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: 'rgb(251, 158, 0)',
borderWidth: 2,
color: 'rgb(51, 51, 51)',
active: {
borderColor: 'rgb(25, 193, 73)'
}
}
})

2
simple-mind-map/src/themes/index.js
View File

@ -8,6 +8,7 @@ import earthYellow from './earthYellow'
import classic from './classic'
import classic2 from './classic2'
import classic3 from './classic3'
import classic4 from './classic4';
import dark from './dark';
import classicGreen from './classicGreen'
import classicBlue from './classicBlue'
@ -31,6 +32,7 @@ export default {
classic,
classic2,
classic3,
classic4,
dark,
classicGreen,
classicBlue,

13
simple-mind-map/src/themes/mint.js
View File

@ -10,6 +10,10 @@ export default merge(defaultTheme, {
// 连线的颜色
lineColor: 'rgb(104, 204, 202)',
lineWidth: 3,
// 概要连线的粗细
generalizationLineWidth: 3,
// 概要连线的颜色
generalizationLineColor: 'rgb(90, 206, 241)',
// 背景颜色
backgroundColor: 'rgb(239, 255, 255)',
// 根节点样式
@ -40,5 +44,14 @@ export default merge(defaultTheme, {
active: {
borderColor: 'rgb(0, 192, 184)'
}
},
// 概要节点样式
generalization: {
fillColor: 'rgb(90, 206, 241)',
borderColor: 'transparent',
color: '#fff',
active: {
borderColor: 'rgb(0, 192, 184)'
}
}
})

14
simple-mind-map/src/themes/pinkGrape.js
View File

@ -10,6 +10,10 @@ export default merge(defaultTheme, {
// 连线的颜色
lineColor: 'rgb(166, 101, 106)',
lineWidth: 3,
// 概要连线的粗细
generalizationLineWidth: 3,
// 概要连线的颜色
generalizationLineColor: '#fff',
// 背景颜色
backgroundColor: 'rgb(255, 208, 211)',
// 根节点样式
@ -41,5 +45,15 @@ export default merge(defaultTheme, {
active: {
borderColor: 'rgb(139, 109, 225)'
}
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: 'transparent',
color: '#222',
active: {
borderColor: 'rgb(139, 109, 225)',
borderWidth: 2,
}
}
})

13
simple-mind-map/src/themes/romanticPurple.js
View File

@ -11,6 +11,10 @@ export default merge(defaultTheme, {
lineColor: 'rgb(123, 115, 191)',
// 背景颜色
backgroundColor: 'rgb(251, 251, 251)',
// 概要连线的粗细
generalizationLineWidth: 1,
// 概要连线的颜色
generalizationLineColor: '#333',
// 根节点样式
root: {
fillColor: 'rgb(123, 115, 191)',
@ -36,5 +40,14 @@ export default merge(defaultTheme, {
active: {
borderColor: 'rgb(61, 57, 96)'
}
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: '#333',
color: '#333',
active: {
borderColor: 'rgb(61, 57, 96)'
}
}
})

13
simple-mind-map/src/themes/skyGreen.js
View File

@ -10,6 +10,10 @@ export default merge(defaultTheme, {
// 连线的颜色
lineColor: '#fff',
lineWidth: 3,
// 概要连线的粗细
generalizationLineWidth: 3,
// 概要连线的颜色
generalizationLineColor: '#fff',
// 背景颜色
backgroundColor: 'rgb(80, 156, 170)',
// 根节点样式
@ -42,5 +46,14 @@ export default merge(defaultTheme, {
active: {
borderColor: 'rgb(251, 227, 188)'
}
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: 'transparent',
color: 'rgb(65, 89, 158)',
active: {
borderColor: 'rgb(251, 227, 188)'
}
}
})

13
simple-mind-map/src/themes/vitalityOrange.js
View File

@ -10,6 +10,10 @@ export default merge(defaultTheme, {
// 连线的颜色
lineColor: 'rgb(254, 146, 0)',
lineWidth: 3,
// 概要连线的粗细
generalizationLineWidth: 3,
// 概要连线的颜色
generalizationLineColor: 'rgb(255, 222, 69)',
// 背景颜色
backgroundColor: 'rgb(255, 246, 243)',
// 根节点样式
@ -42,5 +46,14 @@ export default merge(defaultTheme, {
active: {
borderColor: 'rgb(255, 112, 52)'
}
},
// 概要节点样式
generalization: {
fillColor: 'rgb(255, 222, 69)',
borderColor: 'transparent',
color: 'rgb(51, 51, 51)',
active: {
borderColor: 'rgb(255, 112, 52)'
}
}
})

5
simple-mind-map/src/utils/constant.js
View File

@ -122,6 +122,11 @@ export const themeList = [
value: 'classic3',
img: require('../assets/classic3.jpg')
},
{
name: '脑图经典4',
value: 'classic4',
img: require('../assets/classic4.jpg')
},
{
name: '经典绿',
value: 'classicGreen',

5
web/src/config/index.js
View File

@ -214,6 +214,11 @@ export const shortcutKeyList = [
name: '插入同级节点',
value: 'Enter'
},
{
icon: 'icongaikuozonglan',
name: '插入概要',
value: 'Shift + s'
},
{
icon: 'iconzhankai',
name: '展开/收起节点',