diff --git a/index.html b/index.html index 3cc1294c..25742be7 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -思绪思维导图
\ No newline at end of file +思绪思维导图
\ No newline at end of file diff --git a/simple-mind-map/src/constants/constant.js b/simple-mind-map/src/constants/constant.js index 1593bf81..9490ff9b 100644 --- a/simple-mind-map/src/constants/constant.js +++ b/simple-mind-map/src/constants/constant.js @@ -137,7 +137,7 @@ export const themeList = [ { name: '简约黑', value: 'simpleBlack', - dark: true + dark: false }, { name: '课程绿', diff --git a/web/src/assets/img/darkNightLceBlade.jpg b/web/src/assets/img/darkNightLceBlade.jpg new file mode 100644 index 00000000..1ea928b5 Binary files /dev/null and b/web/src/assets/img/darkNightLceBlade.jpg differ diff --git a/web/src/assets/img/lemonBubbles.jpg b/web/src/assets/img/lemonBubbles.jpg new file mode 100644 index 00000000..ca6c5d67 Binary files /dev/null and b/web/src/assets/img/lemonBubbles.jpg differ diff --git a/web/src/assets/img/morandi.jpg b/web/src/assets/img/morandi.jpg new file mode 100644 index 00000000..b6fa2e2d Binary files /dev/null and b/web/src/assets/img/morandi.jpg differ diff --git a/web/src/assets/img/neonLamp.jpg b/web/src/assets/img/neonLamp.jpg new file mode 100644 index 00000000..2cc1d617 Binary files /dev/null and b/web/src/assets/img/neonLamp.jpg differ diff --git a/web/src/assets/img/oreo.jpg b/web/src/assets/img/oreo.jpg new file mode 100644 index 00000000..45071f4d Binary files /dev/null and b/web/src/assets/img/oreo.jpg differ diff --git a/web/src/assets/img/rose.jpg b/web/src/assets/img/rose.jpg new file mode 100644 index 00000000..d97d4dcb Binary files /dev/null and b/web/src/assets/img/rose.jpg differ diff --git a/web/src/assets/img/seaBlueLine.jpg b/web/src/assets/img/seaBlueLine.jpg new file mode 100644 index 00000000..7e7d6da4 Binary files /dev/null and b/web/src/assets/img/seaBlueLine.jpg differ diff --git a/web/src/assets/img/shallowSea.jpg b/web/src/assets/img/shallowSea.jpg new file mode 100644 index 00000000..0171ee35 Binary files /dev/null and b/web/src/assets/img/shallowSea.jpg differ diff --git a/web/src/config/constant.js b/web/src/config/constant.js index 87e82c94..a2e0e0e7 100644 --- a/web/src/config/constant.js +++ b/web/src/config/constant.js @@ -44,5 +44,13 @@ export const themeMap = { autumn: require('../assets/img/autumn.jpg'), avocado: require('../assets/img/avocado.jpg'), orangeJuice: require('../assets/img/orangeJuice.jpg'), + oreo: require('../assets/img/oreo.jpg'), + shallowSea: require('../assets/img/shallowSea.jpg'), + lemonBubbles: require('../assets/img/lemonBubbles.jpg'), + rose: require('../assets/img/rose.jpg'), + seaBlueLine: require('../assets/img/seaBlueLine.jpg'), + neonLamp: require('../assets/img/neonLamp.jpg'), + darkNightLceBlade: require('../assets/img/darkNightLceBlade.jpg'), + morandi: require('../assets/img/morandi.jpg'), } \ No newline at end of file diff --git a/web/src/customThemes/darkNightLceBlade.js b/web/src/customThemes/darkNightLceBlade.js new file mode 100644 index 00000000..5345d914 --- /dev/null +++ b/web/src/customThemes/darkNightLceBlade.js @@ -0,0 +1,59 @@ +// 暗夜冰刃 +export default { + backgroundColor: 'rgb(0, 21, 21)', + // 连线的颜色 + lineColor: 'rgb(0, 139, 146)', + lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgba(2, 167, 240, 0.5)', + // 关联线默认状态的颜色 + associativeLineColor: 'rgb(255, 255, 255)', + // 关联线文字颜色 + associativeLineTextColor: 'rgb(255, 255, 255)', + // 根节点样式 + root: { + fillColor: 'rgb(0, 243, 255)', + color: 'rgb(0, 21, 21)', + borderColor: '#fff', + borderWidth: 3, + fontSize: 24, + shape: 'parallelogram', + active: { + borderColor: 'rgba(2, 167, 240, 0.5)', + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(0, 21, 21)', + color: '#fff', + borderColor: '#fff', + borderWidth: 3, + fontSize: 18, + shape: 'diamond', + active: { + borderColor: 'rgba(2, 167, 240, 0.5)', + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: '#fff', + active: { + borderColor: 'rgba(2, 167, 240, 0.5)' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: '#fff', + borderColor: 'rgb(0, 117, 255)', + borderWidth: 2, + color: 'rgb(0, 21, 21)', + active: { + borderColor: 'rgb(0, 243, 255)' + } + } + } + \ No newline at end of file diff --git a/web/src/customThemes/index.js b/web/src/customThemes/index.js index 7d41263f..455a9ee2 100644 --- a/web/src/customThemes/index.js +++ b/web/src/customThemes/index.js @@ -1,9 +1,59 @@ -import simpleBlack from './simpleBlack' +import oreo from './oreo' +import shallowSea from './shallowSea' +import lemonBubbles from './lemonBubbles' +import rose from './rose' +import seaBlueLine from './seaBlueLine' +import neonLamp from './neonLamp' +import darkNightLceBlade from './darkNightLceBlade' +import morandi from './morandi' export default [ { - name: '简约黑', - value: 'simpleBlack', - theme: simpleBlack + name: '奥利奥', + value: 'oreo', + theme: oreo, + dark: false + }, + { + name: '浅海', + value: 'shallowSea', + theme: shallowSea, + dark: false + }, + { + name: '柠檬气泡', + value: 'lemonBubbles', + theme: lemonBubbles, + dark: false + }, + { + name: '玫瑰', + value: 'rose', + theme: rose, + dark: false + }, + { + name: '海蓝线', + value: 'seaBlueLine', + theme: seaBlueLine, + dark: false + }, + { + name: '霓虹灯', + value: 'neonLamp', + theme: neonLamp, + dark: true + }, + { + name: '暗夜冰刃', + value: 'darkNightLceBlade', + theme: darkNightLceBlade, + dark: true + }, + { + name: '莫兰迪', + value: 'morandi', + theme: morandi, + dark: false } ] \ No newline at end of file diff --git a/web/src/customThemes/lemonBubbles.js b/web/src/customThemes/lemonBubbles.js new file mode 100644 index 00000000..15470539 --- /dev/null +++ b/web/src/customThemes/lemonBubbles.js @@ -0,0 +1,55 @@ +// 柠檬气泡 +export default { + backgroundColor: 'rgb(236, 254, 255)', + // 连线的颜色 + lineColor: 'rgb(51, 51, 51)', + lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(51, 51, 51)', + // 根节点样式 + root: { + fillColor: 'rgb(39, 222, 232)', + color: 'rgb(26, 26, 26)', + borderColor: 'rgb(26, 26, 26)', + borderWidth: 3, + fontSize: 24, + shape: 'roundedRectangle', + active: { + borderColor: 'rgb(235, 255, 187)', + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(235, 255, 187)', + color: 'rgb(0, 0, 0)', + borderColor: 'rgb(51, 51, 51)', + borderWidth: 3, + fontSize: 18, + shape: 'roundedRectangle', + active: { + borderColor: 'rgb(39, 222, 232)', + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(0, 0, 0)', + active: { + borderColor: 'rgb(39, 222, 232)' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: '#fff', + borderColor: 'rgb(26, 26, 26)', + borderWidth: 2, + color: 'rgb(26, 26, 26)', + active: { + borderColor: 'rgb(39, 222, 232)' + } + } + } + \ No newline at end of file diff --git a/web/src/customThemes/morandi.js b/web/src/customThemes/morandi.js new file mode 100644 index 00000000..dc106f68 --- /dev/null +++ b/web/src/customThemes/morandi.js @@ -0,0 +1,59 @@ +// 莫兰迪 +export default { + backgroundColor: 'rgb(252, 245, 241)', + // 连线的颜色 + lineColor: 'rgb(144, 114, 110)', + lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(128, 154, 151)', + // 关联线默认状态的颜色 + associativeLineColor: 'rgb(166, 124, 106)', + // 关联线文字颜色 + associativeLineTextColor: 'rgb(166, 124, 106)', + // 根节点样式 + root: { + fillColor: 'rgb(207, 121, 105)', + color: '#fff', + borderColor: 'rgb(207, 121, 105)', + borderWidth: 3, + fontSize: 24, + shape: 'roundedRectangle', + active: { + borderColor: 'rgb(172, 202, 199)', + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(239, 210, 207)', + color: 'rgb(144, 79, 68)', + borderColor: 'rgb(222, 186, 183)', + borderWidth: 3, + fontSize: 18, + shape: 'roundedRectangle', + active: { + borderColor: 'rgb(172, 202, 199)', + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(131, 90, 64)', + active: { + borderColor: 'rgb(172, 202, 199)' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: 'rgb(172, 202, 199)', + borderColor: 'rgb(172, 202, 199)', + borderWidth: 2, + color: 'rgb(91, 102, 97)', + active: { + borderColor: 'rgb(207, 121, 105)' + } + } + } + \ No newline at end of file diff --git a/web/src/customThemes/neonLamp.js b/web/src/customThemes/neonLamp.js new file mode 100644 index 00000000..104e04f0 --- /dev/null +++ b/web/src/customThemes/neonLamp.js @@ -0,0 +1,58 @@ +// 霓虹灯 +export default { + backgroundColor: 'rgb(17, 17, 84)', + // 连线的颜色 + lineColor: 'rgb(255, 0, 214)', + lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(255, 181, 0)', + // 关联线默认状态的颜色 + associativeLineColor: 'rgb(255, 255, 255)', + // 关联线文字颜色 + associativeLineTextColor: 'rgb(255, 255, 255)', + // 根节点样式 + root: { + fillColor: 'rgb(251, 233, 248)', + color: 'rgb(208, 5, 176)', + borderColor: 'rgb(255, 0, 214)', + borderWidth: 3, + fontSize: 24, + shape: 'roundedRectangle', + active: { + borderColor: 'rgb(255, 181, 0)', + } + }, + // 二级节点样式 + second: { + fillColor: 'transparent', + color: 'rgb(248, 177, 237)', + borderColor: '', + borderWidth: 3, + fontSize: 18, + active: { + borderColor: 'rgb(255, 181, 0)', + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: '#fff', + active: { + borderColor: 'rgb(255, 181, 0)' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: '#fff', + borderColor: 'rgb(255, 181, 0)', + borderWidth: 2, + color: 'rgb(17, 17, 84)', + active: { + borderColor: 'rgb(255, 0, 214)' + } + } + } + \ No newline at end of file diff --git a/web/src/customThemes/simpleBlack.js b/web/src/customThemes/oreo.js similarity index 58% rename from web/src/customThemes/simpleBlack.js rename to web/src/customThemes/oreo.js index 36457826..dfa58cff 100644 --- a/web/src/customThemes/simpleBlack.js +++ b/web/src/customThemes/oreo.js @@ -1,17 +1,17 @@ -// 简约黑 +// 奥利奥 export default { // 连线的颜色 - lineColor: 'rgb(34, 34, 34)', - lineWidth: 4, + lineColor: 'rgb(51, 51, 51)', + lineWidth: 3, // 概要连线的粗细 - generalizationLineWidth: 4, + generalizationLineWidth: 3, // 概要连线的颜色 - generalizationLineColor: 'rgb(34, 34, 34)', + generalizationLineColor: 'rgb(51, 51, 51)', // 根节点样式 root: { - fillColor: '#fff', - color: 'rgb(34, 34, 34)', - borderColor: 'rgb(34, 34, 34)', + fillColor: 'rgb(22, 22, 22)', + color: '#fff', + borderColor: 'rgb(22, 22, 22)', borderWidth: 3, fontSize: 24, active: { @@ -20,21 +20,22 @@ export default { }, // 二级节点样式 second: { - fillColor: 'rgb(241, 246, 248)', - color: 'rgb(34, 34, 34)', - borderColor: 'rgb(34, 34, 34)', + fillColor: 'rgb(244, 246, 253)', + color: 'rgb(0, 0, 0)', + borderColor: '', borderWidth: 3, fontSize: 18, + shape: 'roundedRectangle', active: { - borderColor: '#a13600', + borderColor: 'rgb(22, 22, 22)', } }, // 三级及以下节点样式 node: { fontSize: 14, - color: 'rgb(34, 34, 34)', + color: 'rgb(0, 0, 0)', active: { - borderColor: '#a13600' + borderColor: 'rgb(22, 22, 22)' } }, // 概要节点样式 diff --git a/web/src/customThemes/rose.js b/web/src/customThemes/rose.js new file mode 100644 index 00000000..c81368b8 --- /dev/null +++ b/web/src/customThemes/rose.js @@ -0,0 +1,55 @@ +// 玫瑰 +export default { + backgroundColor: 'rgb(255, 251, 231)', + // 连线的颜色 + lineColor: 'rgb(110, 165, 79)', + lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(136, 100, 0)', + // 根节点样式 + root: { + fillColor: 'rgb(254, 92, 92)', + color: '#fff', + borderColor: 'rgb(18, 187, 55)', + borderWidth: 3, + fontSize: 24, + shape: 'roundedRectangle', + active: { + borderColor: 'rgb(136, 100, 0)', + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(209, 237, 176)', + color: 'rgb(85, 136, 55)', + borderColor: '', + borderWidth: 3, + fontSize: 18, + shape: 'roundedRectangle', + active: { + borderColor: 'rgb(254, 92, 92)', + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(26, 26, 26)', + active: { + borderColor: 'rgb(209, 237, 176)' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: '#fff', + borderColor: 'rgb(136, 100, 0)', + borderWidth: 2, + color: 'rgb(136, 100, 0)', + active: { + borderColor: 'rgb(254, 92, 92)' + } + } + } + \ No newline at end of file diff --git a/web/src/customThemes/seaBlueLine.js b/web/src/customThemes/seaBlueLine.js new file mode 100644 index 00000000..ffaba245 --- /dev/null +++ b/web/src/customThemes/seaBlueLine.js @@ -0,0 +1,55 @@ +// 海蓝线 +export default { + backgroundColor: 'rgb(231, 245, 255)', + // 连线的颜色 + lineColor: 'rgb(96, 189, 255)', + lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(0, 155, 255)', + // 根节点样式 + root: { + fillColor: 'rgb(96, 189, 255)', + color: '#fff', + borderColor: '#fff', + borderWidth: 3, + fontSize: 24, + shape: 'roundedRectangle', + active: { + borderColor: 'rgb(0, 155, 255)', + } + }, + // 二级节点样式 + second: { + fillColor: '#fff', + color: 'rgb(0, 149, 255)', + borderColor: '', + borderWidth: 3, + fontSize: 18, + shape: 'roundedRectangle', + active: { + borderColor: 'rgb(96, 189, 255)', + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(0, 66, 157)', + active: { + borderColor: 'rgb(96, 189, 255)' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: '#fff', + borderColor: 'rgb(0, 155, 255)', + borderWidth: 2, + color: 'rgb(0, 155, 255)', + active: { + borderColor: 'rgba(2, 167, 240, 0.5)' + } + } + } + \ No newline at end of file diff --git a/web/src/customThemes/shallowSea.js b/web/src/customThemes/shallowSea.js new file mode 100644 index 00000000..92f6d160 --- /dev/null +++ b/web/src/customThemes/shallowSea.js @@ -0,0 +1,54 @@ +// 浅海 +export default { + backgroundColor: 'rgb(187, 241, 250)', + // 连线的颜色 + lineColor: 'rgb(74, 139, 170)', + lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: 'rgb(255, 168, 101)', + // 根节点样式 + root: { + fillColor: 'rgb(51, 149, 255)', + color: '#fff', + borderColor: 'rgb(51, 149, 255)', + borderWidth: 3, + fontSize: 24, + shape: 'roundedRectangle', + active: { + borderColor: 'rgb(255, 168, 101)', + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(74, 139, 170)', + color: '#fff', + borderColor: '', + borderWidth: 3, + fontSize: 18, + active: { + borderColor: 'rgb(255, 168, 101)', + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: 'rgb(0, 0, 0)', + active: { + borderColor: 'rgb(255, 168, 101)' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: '#fff', + borderColor: 'rgb(255, 168, 101)', + borderWidth: 2, + color: '#000', + active: { + borderColor: 'rgb(51, 149, 255)' + } + } + } + \ No newline at end of file diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index d45b3bc1..617c8646 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/web/src/pages/Edit/components/Edit.vue @@ -83,9 +83,9 @@ MindMap .usePlugin(SearchPlugin) // 注册自定义主题 -// customThemeList.forEach((item) => { -// MindMap.defineTheme(item.value, item.theme) -// }) +customThemeList.forEach((item) => { + MindMap.defineTheme(item.value, item.theme) +}) /** * @Author: 王林 diff --git a/web/src/pages/Edit/components/Theme.vue b/web/src/pages/Edit/components/Theme.vue index b5f09302..4a21d976 100644 --- a/web/src/pages/Edit/components/Theme.vue +++ b/web/src/pages/Edit/components/Theme.vue @@ -1,9 +1,12 @@