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

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

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