diff --git a/simple-mind-map/src/themes/autumn.js b/simple-mind-map/src/themes/autumn.js new file mode 100644 index 00000000..66c301bb --- /dev/null +++ b/simple-mind-map/src/themes/autumn.js @@ -0,0 +1,57 @@ +import defaultTheme from './default' +import merge from 'deepmerge' + +// 秋天 +export default merge(defaultTheme, { + // 背景颜色 + backgroundColor: '#fff2df', + // 连线的颜色 + lineColor: '#b0bc47', + lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: '#b0bc47', + // 根节点样式 + root: { + fillColor: '#e68112', + color: '#fff', + borderColor: '#e68112', + borderWidth: 0, + fontSize: 24, + active: { + borderColor: '#b0bc47', + borderWidth: 3 + } + }, + // 二级节点样式 + second: { + fillColor: '#ffd683', + color: '#8c5416', + borderColor: '#b0bc47', + borderWidth: 2, + fontSize: 18, + active: { + borderColor: '#e68112' + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: '#8c5416', + active: { + borderColor: '#b0bc47' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: '#ffd683', + borderColor: '#b0bc47', + borderWidth: 2, + color: '#8c5416', + active: { + borderColor: '#e68112' + } + } +}) diff --git a/simple-mind-map/src/themes/avocado.js b/simple-mind-map/src/themes/avocado.js new file mode 100644 index 00000000..d0d4f2bf --- /dev/null +++ b/simple-mind-map/src/themes/avocado.js @@ -0,0 +1,57 @@ +import defaultTheme from './default' +import merge from 'deepmerge' + +// 牛油果 +export default merge(defaultTheme, { + // 背景颜色 + backgroundColor: '#e6f1de', + // 连线的颜色 + lineColor: '#f5ffad', + lineWidth: 4, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: '#749336', + // 根节点样式 + root: { + fillColor: '#94c143', + color: '#fff', + borderColor: '#94c143', + borderWidth: 0, + fontSize: 24, + active: { + borderColor: '#749336', + borderWidth: 3 + } + }, + // 二级节点样式 + second: { + fillColor: '#cee498', + color: '#749336', + borderColor: '#aec668', + borderWidth: 2, + fontSize: 18, + active: { + borderColor: '#749336' + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: '#749336', + active: { + borderColor: '#749336' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: '#cee498', + borderColor: '#aec668', + borderWidth: 2, + color: '#749336', + active: { + borderColor: '#749336' + } + } +}) diff --git a/simple-mind-map/src/themes/index.js b/simple-mind-map/src/themes/index.js index b84e1157..d3ab12ac 100644 --- a/simple-mind-map/src/themes/index.js +++ b/simple-mind-map/src/themes/index.js @@ -27,6 +27,9 @@ import redSpirit from './redSpirit' import blackHumour from './blackHumour' import lateNightOffice from './lateNightOffice' import blackGold from './blackGold' +import avocado from './avocado' +import autumn from './autumn' +import orangeJuice from './orangeJuice' export default { default: defaultTheme, @@ -57,5 +60,8 @@ export default { redSpirit, blackHumour, lateNightOffice, - blackGold + blackGold, + avocado, + autumn, + orangeJuice } diff --git a/simple-mind-map/src/themes/orangeJuice.js b/simple-mind-map/src/themes/orangeJuice.js new file mode 100644 index 00000000..419684e3 --- /dev/null +++ b/simple-mind-map/src/themes/orangeJuice.js @@ -0,0 +1,57 @@ +import defaultTheme from './default' +import merge from 'deepmerge' + +// 橙汁 +export default merge(defaultTheme, { + // 背景颜色 + backgroundColor: '#070616', + // 连线的颜色 + lineColor: '#fff', + lineWidth: 3, + // 概要连线的粗细 + generalizationLineWidth: 3, + // 概要连线的颜色 + generalizationLineColor: '#fff', + // 根节点样式 + root: { + fillColor: '#ff6811', + color: '#110501', + borderColor: '#ff6811', + borderWidth: 0, + fontSize: 24, + active: { + borderColor: '#a9a4a9', + borderWidth: 3 + } + }, + // 二级节点样式 + second: { + fillColor: '#070616', + color: '#a9a4a9', + borderColor: '#ff6811', + borderWidth: 2, + fontSize: 18, + active: { + borderColor: '#110501' + } + }, + // 三级及以下节点样式 + node: { + fontSize: 14, + color: '#a9a4a9', + active: { + borderColor: '#ff6811' + } + }, + // 概要节点样式 + generalization: { + fontSize: 14, + fillColor: '', + borderColor: '#ff6811', + borderWidth: 2, + color: '#a9a4a9', + active: { + borderColor: '#110501' + } + } +}) diff --git a/simple-mind-map/src/utils/constant.js b/simple-mind-map/src/utils/constant.js index 66633a83..6505b71d 100644 --- a/simple-mind-map/src/utils/constant.js +++ b/simple-mind-map/src/utils/constant.js @@ -28,34 +28,6 @@ export const themeList = [ name: '默认', value: 'default', }, - { - name: '脑图经典', - value: 'classic', - }, - { - name: '小黄人', - value: 'minions', - }, - { - name: '粉红葡萄', - value: 'pinkGrape', - }, - { - name: '薄荷', - value: 'mint', - }, - { - name: '金色vip', - value: 'gold', - }, - { - name: '活力橙', - value: 'vitalityOrange', - }, - { - name: '绿叶', - value: 'greenLeaf', - }, { name: '暗色2', value: 'dark2', @@ -72,10 +44,6 @@ export const themeList = [ name: '脑图经典3', value: 'classic3', }, - { - name: '脑图经典4', - value: 'classic4', - }, { name: '经典绿', value: 'classicGreen', @@ -112,6 +80,38 @@ export const themeList = [ name: '浪漫紫', value: 'romanticPurple', }, + { + name: '粉红葡萄', + value: 'pinkGrape', + }, + { + name: '薄荷', + value: 'mint', + }, + { + name: '金色vip', + value: 'gold', + }, + { + name: '活力橙', + value: 'vitalityOrange', + }, + { + name: '绿叶', + value: 'greenLeaf', + }, + { + name: '脑图经典', + value: 'classic', + }, + { + name: '脑图经典4', + value: 'classic4', + }, + { + name: '小黄人', + value: 'minions', + }, { name: '简约黑', value: 'simpleBlack', @@ -139,12 +139,25 @@ export const themeList = [ { name: '黑金', value: 'blackGold', + }, + { + name: '牛油果', + value: 'avocado', + }, + { + name: '秋天', + value: 'autumn', + }, + { + name: '橙汁', + value: 'orangeJuice', } ] // 常量 export const CONSTANTS = { CHANGE_THEME: 'changeTheme', + SET_DATA: 'setData', TRANSFORM_TO_NORMAL_NODE: 'transformAllNodesToNormalNode', MODE: { READONLY: 'readonly', diff --git a/web/src/assets/img/autumn.jpg b/web/src/assets/img/autumn.jpg new file mode 100644 index 00000000..fa052790 Binary files /dev/null and b/web/src/assets/img/autumn.jpg differ diff --git a/web/src/assets/img/avocado.jpg b/web/src/assets/img/avocado.jpg new file mode 100644 index 00000000..a1235b59 Binary files /dev/null and b/web/src/assets/img/avocado.jpg differ diff --git a/web/src/assets/img/orangeJuice.jpg b/web/src/assets/img/orangeJuice.jpg new file mode 100644 index 00000000..0ee8653f Binary files /dev/null and b/web/src/assets/img/orangeJuice.jpg differ diff --git a/web/src/config/constant.js b/web/src/config/constant.js index 8cd50454..049a011d 100644 --- a/web/src/config/constant.js +++ b/web/src/config/constant.js @@ -40,5 +40,8 @@ export const themeMap = { blackHumour: require('../assets/img/blackHumour.jpg'), lateNightOffice: require('../assets/img/lateNightOffice.jpg'), blackGold: require('../assets/img/blackGold.jpg'), + autumn: require('../assets/img/autumn.jpg'), + avocado: require('../assets/img/avocado.jpg'), + orangeJuice: require('../assets/img/orangeJuice.jpg'), } \ No newline at end of file diff --git a/web/src/pages/Edit/components/Theme.vue b/web/src/pages/Edit/components/Theme.vue index a6e60c41..e68ab649 100644 --- a/web/src/pages/Edit/components/Theme.vue +++ b/web/src/pages/Edit/components/Theme.vue @@ -42,7 +42,7 @@ export default { }, data() { return { - themeList: [...themeList],// ...customThemeList + themeList: [...themeList].reverse(),// ...customThemeList themeMap, theme: '' }