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

Demo:1.优化侧边栏的样式;2.修复初始结构为带鱼头的结构时节点样式形状列表出现空项的问题

Browse Source
This commit is contained in:
wanglin2
2025-04-20 10:13:05 +08:00
parent cd361c1f6e
commit 0c4fadb211
2 changed files with 40 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
web/src/pages/Edit/components/BaseStyle.vue
View File

@@ -126,7 +126,7 @@
</el-tabs>
</div>
<!-- 连线 -->
<div class="title noTop">{{ $t('baseStyle.line') }}</div>
<div class="title">{{ $t('baseStyle.line') }}</div>
<div class="row">
<div class="rowItem">
<span class="name">{{ $t('baseStyle.color') }}</span>
@@ -357,7 +357,7 @@
</div>
</div>
<!-- 彩虹线条 -->
<div class="title noTop">{{ $t('baseStyle.rainbowLines') }}</div>
<div class="title">{{ $t('baseStyle.rainbowLines') }}</div>
<div class="row">
<div class="rowItem">
<el-popover
@@ -401,7 +401,7 @@
</div>
</div>
<!-- 概要连线 -->
<div class="title noTop">{{ $t('baseStyle.lineOfOutline') }}</div>
<div class="title">{{ $t('baseStyle.lineOfOutline') }}</div>
<div class="row">
<div class="rowItem">
<span class="name">{{ $t('baseStyle.color') }}</span>
@@ -451,7 +451,7 @@
</div>
</div>
<!-- 关联线 -->
<div class="title noTop">{{ $t('baseStyle.associativeLine') }}</div>
<div class="title">{{ $t('baseStyle.associativeLine') }}</div>
<div class="row">
<div class="rowItem">
<span class="name">{{ $t('baseStyle.associativeLineColor') }}</span>
@@ -594,7 +594,7 @@
</div>
</div>
<!-- 关联线文字 -->
<div class="title noTop">{{ $t('baseStyle.associativeLineText') }}</div>
<div class="title">{{ $t('baseStyle.associativeLineText') }}</div>
<div class="row">
<div class="rowItem">
<span class="name">{{ $t('baseStyle.fontFamily') }}</span>
@@ -656,7 +656,7 @@
</div>
<!-- 节点边框风格 -->
<template v-if="showNodeUseLineStyle">
<div class="title noTop">{{ $t('baseStyle.nodeBorderType') }}</div>
<div class="title">{{ $t('baseStyle.nodeBorderType') }}</div>
<div class="row">
<div class="rowItem">
<el-checkbox
@@ -672,8 +672,8 @@
</div>
</template>
<!-- 内边距 -->
<div class="title noTop">{{ $t('baseStyle.nodePadding') }}</div>
<div class="row">
<div class="title">{{ $t('baseStyle.nodePadding') }}</div>
<div class="row noBottom">
<div class="rowItem">
<span class="name">{{ $t('baseStyle.horizontal') }}</span>
<el-slider
@@ -702,8 +702,8 @@
</div>
</div>
<!-- 图片 -->
<div class="title noTop">{{ $t('baseStyle.image') }}</div>
<div class="row">
<div class="title">{{ $t('baseStyle.image') }}</div>
<div class="row noBottom">
<div class="rowItem">
<span class="name">{{ $t('baseStyle.maximumWidth') }}</span>
<el-slider
@@ -736,7 +736,7 @@
</div>
</div>
<!-- 图标 -->
<div class="title noTop">{{ $t('baseStyle.icon') }}</div>
<div class="title">{{ $t('baseStyle.icon') }}</div>
<div class="row">
<div class="rowItem">
<span class="name">{{ $t('baseStyle.size') }}</span>
@@ -754,8 +754,8 @@
</div>
</div>
<!-- 二级节点外边距 -->
<div class="title noTop">{{ $t('baseStyle.nodeMargin') }}</div>
<div class="row column">
<div class="title">{{ $t('baseStyle.nodeMargin') }}</div>
<div class="row column noBottom">
<el-tabs
class="tab"
v-model="marginActiveTab"
@@ -798,8 +798,8 @@
</div>
</div>
<!-- 外框内边距 -->
<div class="title noTop">{{ $t('baseStyle.outerFramePadding') }}</div>
<div class="row">
<div class="title">{{ $t('baseStyle.outerFramePadding') }}</div>
<div class="row noBottom">
<div class="rowItem">
<span class="name">{{ $t('baseStyle.horizontal') }}</span>
<el-slider
@@ -1167,7 +1167,7 @@ export default {
font-weight: 500;
color: rgba(26, 26, 26, 0.9);
margin-bottom: 10px;
margin-top: 20px;
margin-top: 35px;
&.noTop {
margin-top: 0;
@@ -1179,6 +1179,10 @@ export default {
justify-content: space-between;
margin-bottom: 10px;
&.noBottom {
margin-bottom: 0;
}
&.column {
flex-direction: column;
}

20
web/src/pages/Edit/components/Style.vue
View File

@@ -481,8 +481,8 @@
</div>
</div>
<!-- 节点内边距 -->
<div class="title noTop">{{ $t('style.nodePadding') }}</div>
<div class="row">
<div class="title">{{ $t('style.nodePadding') }}</div>
<div class="row noBottom">
<div class="rowItem">
<span class="name">{{ $t('style.horizontal') }}</span>
<el-slider
@@ -503,7 +503,7 @@
</div>
</div>
<!-- 节点图片布局 -->
<div class="title noTop">{{ $t('style.img') }}</div>
<div class="title">{{ $t('style.img') }}</div>
<div class="row">
<div class="rowItem">
<span class="name">{{ $t('style.placement') }}</span>
@@ -528,7 +528,7 @@
</div>
</div>
<!-- 节点标签布局 -->
<div class="title noTop">{{ $t('style.tag') }}</div>
<div class="title">{{ $t('style.tag') }}</div>
<div class="row">
<div class="rowItem">
<span class="name">{{ $t('style.placement') }}</span>
@@ -635,7 +635,11 @@ export default {
shapeList() {
return [
...(shapeList[this.$i18n.locale] || shapeList.zh),
...this.mindMap.extendShapeList.map(item => {
...this.mindMap.extendShapeList
.filter(item => {
return !['fishHead'].includes(item.name)
})
.map(item => {
return {
width: '40px',
name: item.nameShow,
@@ -854,7 +858,7 @@ export default {
font-weight: 500;
color: rgba(26, 26, 26, 0.9);
margin-bottom: 10px;
margin-top: 20px;
margin-top: 35px;
&.noTop {
margin-top: 0;
@@ -866,6 +870,10 @@ export default {
justify-content: space-between;
margin-bottom: 10px;
&.noBottom {
margin-bottom: 0;
}
.btnGroup {
width: 100%;
display: flex;