coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-21 10:27:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

新增主题

Browse Source
This commit is contained in:
wanglin 2021-07-12 22:49:22 +08:00
parent cd55db7ed7
commit 5d4b42d519
16 changed files with 366 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
simple-mind-map/example/exampleData.js
View File

@ -795,6 +795,6 @@ export default {
},
// "layout": "mindMap",
// "layout": "logicalStructure"
"layout": "catalogOrganization"
// "layout": "organizationStructure"
// "layout": "catalogOrganization"
"layout": "organizationStructure"
}

46
simple-mind-map/src/themes/dark2.js Normal file
View File

@ -0,0 +1,46 @@
import defaultTheme from './default';
import merge from 'deepmerge';
/**
* @Author: 王林
* @Date: 2021-04-11 15:22:18
* @Desc: 暗色2
*/
export default merge(defaultTheme, {
// 连线的颜色
lineColor: 'rgb(75, 81, 78)',
lineWidth: 3,
// 背景颜色
backgroundColor: 'rgb(27, 31, 34)',
// 根节点样式
root: {
fillColor: 'rgb(36, 179, 96)',
color: '#fff',
borderColor: '',
borderWidth: 0,
active: {
borderColor: 'rgb(254, 199, 13)',
borderWidth: 3,
}
},
// 二级节点样式
second: {
fillColor: 'rgb(254, 199, 13)',
color: 'rgb(0, 0, 0)',
borderColor: '',
borderWidth: 0,
fontSize: 14,
active: {
borderColor: 'rgb(36, 179, 96)',
borderWidth: 2
}
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: 'rgb(204, 204, 204)',
active: {
borderColor: 'rgb(254, 199, 13)'
}
}
})

46
simple-mind-map/src/themes/gold.js Normal file
View File

@ -0,0 +1,46 @@
import defaultTheme from './default';
import merge from 'deepmerge';
/**
* @Author: 王林
* @Date: 2021-04-11 15:22:18
* @Desc: 金色vip
*/
export default merge(defaultTheme, {
// 连线的颜色
lineColor: 'rgb(51, 56, 62)',
lineWidth: 3,
// 背景颜色
backgroundColor: '#fff',
// 根节点样式
root: {
fillColor: 'rgb(51, 56, 62)',
color: 'rgb(247, 208, 160)',
borderColor: '',
borderWidth: 0,
active: {
borderColor: 'rgb(247, 208, 160)',
borderWidth: 3,
}
},
// 二级节点样式
second: {
fillColor: 'rgb(239, 209, 176)',
color: 'rgb(81, 58, 42)',
borderColor: '',
borderWidth: 0,
fontSize: 14,
active: {
borderColor: 'rgb(51, 56, 62)',
borderWidth: 2
}
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: '#222',
active: {
borderColor: 'rgb(0, 192, 184)'
}
}
})

46
simple-mind-map/src/themes/greenLeaf.js Normal file
View File

@ -0,0 +1,46 @@
import defaultTheme from './default';
import merge from 'deepmerge';
/**
* @Author: 王林
* @Date: 2021-04-11 15:22:18
* @Desc: 绿叶
*/
export default merge(defaultTheme, {
// 连线的颜色
lineColor: 'rgb(40, 193, 84)',
lineWidth: 3,
// 背景颜色
backgroundColor: 'rgb(238, 255, 243)',
// 根节点样式
root: {
fillColor: 'rgb(25, 193, 73)',
color: '#fff',
borderColor: '',
borderWidth: 0,
active: {
borderColor: '#222',
borderWidth: 3,
}
},
// 二级节点样式
second: {
fillColor: '#fff',
color: 'rgb(69, 149, 96)',
borderColor: '',
borderWidth: 0,
fontSize: 14,
active: {
borderColor: 'rgb(25, 193, 73)',
borderWidth: 2
}
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: '#222',
active: {
borderColor: 'rgb(25, 193, 73)'
}
}
})

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

@ -13,6 +13,12 @@ import classicGreen from './classicGreen'
import classicBlue from './classicBlue'
import minions from './minions'
import pinkGrape from './pinkGrape'
import mint from './mint'
import gold from './gold'
import vitalityOrange from './vitalityOrange'
import greenLeaf from './greenLeaf'
import dark2 from './dark2'
import skyGreen from './skyGreen'
export default {
default: defaultTheme,
@ -29,5 +35,11 @@ export default {
classicGreen,
classicBlue,
minions,
pinkGrape
pinkGrape,
mint,
gold,
vitalityOrange,
greenLeaf,
dark2,
skyGreen
}

44
simple-mind-map/src/themes/mint.js Normal file
View File

@ -0,0 +1,44 @@
import defaultTheme from './default';
import merge from 'deepmerge';
/**
* @Author: 王林
* @Date: 2021-04-11 15:22:18
* @Desc: 薄荷
*/
export default merge(defaultTheme, {
// 连线的颜色
lineColor: 'rgb(104, 204, 202)',
lineWidth: 3,
// 背景颜色
backgroundColor: 'rgb(239, 255, 255)',
// 根节点样式
root: {
fillColor: 'rgb(0, 192, 184)',
borderColor: '',
borderWidth: 0,
active: {
borderColor: 'rgb(255, 160, 36)',
borderWidth: 3,
}
},
// 二级节点样式
second: {
fillColor: '#fff',
color: '#222',
borderColor: 'rgb(184, 235, 233)',
borderWidth: 2,
fontSize: 14,
active: {
borderColor: 'rgb(0, 192, 184)'
}
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: '#222',
active: {
borderColor: 'rgb(0, 192, 184)'
}
}
})

46
simple-mind-map/src/themes/skyGreen.js Normal file
View File

@ -0,0 +1,46 @@
import defaultTheme from './default';
import merge from 'deepmerge';
/**
* @Author: 王林
* @Date: 2021-04-11 15:22:18
* @Desc: 天清绿
*/
export default merge(defaultTheme, {
// 连线的颜色
lineColor: '#fff',
lineWidth: 3,
// 背景颜色
backgroundColor: 'rgb(80, 156, 170)',
// 根节点样式
root: {
fillColor: '#fff',
borderColor: '',
borderWidth: 0,
color: 'rgb(65, 89, 158)',
active: {
borderColor: 'rgb(251, 227, 188)',
borderWidth: 3,
}
},
// 二级节点样式
second: {
fillColor: 'rgb(251, 227, 188)',
color: 'rgb(65, 89, 158)',
borderColor: '',
borderWidth: 0,
fontSize: 14,
active: {
borderColor: '#fff',
borderWidth: 2,
}
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: 'rgb(65, 89, 158)',
active: {
borderColor: 'rgb(251, 227, 188)'
}
}
})

46
simple-mind-map/src/themes/vitalityOrange.js Normal file
View File

@ -0,0 +1,46 @@
import defaultTheme from './default';
import merge from 'deepmerge';
/**
* @Author: 王林
* @Date: 2021-04-11 15:22:18
* @Desc: 活力橙
*/
export default merge(defaultTheme, {
// 连线的颜色
lineColor: 'rgb(254, 146, 0)',
lineWidth: 3,
// 背景颜色
backgroundColor: 'rgb(255, 246, 243)',
// 根节点样式
root: {
fillColor: 'rgb(255, 112, 52)',
color: '#fff',
borderColor: '',
borderWidth: 0,
active: {
borderColor: 'rgb(51, 51, 51)',
borderWidth: 3,
}
},
// 二级节点样式
second: {
fillColor: '#fff',
color: 'rgb(51, 51, 51)',
borderColor: '',
borderWidth: 0,
fontSize: 14,
active: {
borderColor: 'rgb(255, 112, 52)',
borderWidth: 2
}
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: '#222',
active: {
borderColor: 'rgb(255, 112, 52)'
}
}
})

52
web/src/assets/icon-font/demo_index.html
View File

@ -54,6 +54,18 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe656;</span>
<div class="name">后退-实</div>
<div class="code-name">&amp;#xe656;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe654;</span>
<div class="name">前进</div>
<div class="code-name">&amp;#xe654;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe603;</span>
<div class="name">撤回</div>
@ -234,9 +246,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1626013782202') format('woff2'),
url('iconfont.woff?t=1626013782202') format('woff'),
url('iconfont.ttf?t=1626013782202') format('truetype');
src: url('iconfont.woff2?t=1626099544460') format('woff2'),
url('iconfont.woff?t=1626099544460') format('woff'),
url('iconfont.ttf?t=1626099544460') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -262,6 +274,24 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont iconhoutui-shi"></span>
<div class="name">
后退-实
</div>
<div class="code-name">.iconhoutui-shi
</div>
</li>
<li class="dib">
<span class="icon iconfont iconqianjin1"></span>
<div class="name">
前进
</div>
<div class="code-name">.iconqianjin1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconwithdraw"></span>
<div class="name">
@ -532,6 +562,22 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconhoutui-shi"></use>
</svg>
<div class="name">后退-实</div>
<div class="code-name">#iconhoutui-shi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconqianjin1"></use>
</svg>
<div class="name">前进</div>
<div class="code-name">#iconqianjin1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconwithdraw"></use>

14
web/src/assets/icon-font/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 2479351 */
src: url('iconfont.woff2?t=1626013782202') format('woff2'),
url('iconfont.woff?t=1626013782202') format('woff'),
url('iconfont.ttf?t=1626013782202') format('truetype');
src: url('iconfont.woff2?t=1626099544460') format('woff2'),
url('iconfont.woff?t=1626099544460') format('woff'),
url('iconfont.ttf?t=1626099544460') format('truetype');
}
.iconfont {
@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale;
}
.iconhoutui-shi:before {
content: "\e656";
}
.iconqianjin1:before {
content: "\e654";
}
.iconwithdraw:before {
content: "\e603";
}

2
web/src/assets/icon-font/iconfont.js
View File

File diff suppressed because one or more lines are too long

14
web/src/assets/icon-font/iconfont.json
View File

@ -5,6 +5,20 @@
"css_prefix_text": "icon",
"description": "思维导图",
"glyphs": [
{
"icon_id": "5110748",
"name": "后退-实",
"font_class": "houtui-shi",
"unicode": "e656",
"unicode_decimal": 58966
},
{
"icon_id": "14420971",
"name": "前进",
"font_class": "qianjin1",
"unicode": "e654",
"unicode_decimal": 58964
},
{
"icon_id": "1368553",
"name": "撤回",

BIN
web/src/assets/icon-font/iconfont.ttf
View File

Binary file not shown.

BIN
web/src/assets/icon-font/iconfont.woff
View File

Binary file not shown.

BIN
web/src/assets/icon-font/iconfont.woff2
View File

Binary file not shown.

4
web/src/pages/Edit/components/Toolbar.vue
View File

@ -10,7 +10,7 @@
}"
@click="$bus.$emit('execCommand', 'BACK')"
>
<span class="icon iconfont iconwithdraw"></span>
<span class="icon iconfont iconhoutui-shi"></span>
<span class="text">回退</span>
</div>
<div
@ -20,7 +20,7 @@
}"
@click="$bus.$emit('execCommand', 'FORWARD')"
>
<span class="icon iconfont iconqianjin"></span>
<span class="icon iconfont iconqianjin1"></span>
<span class="text">前进</span>
</div>
<div