修改TabPage标签布局:使用内部flex容器和justify-between确保标题靠左、关闭按钮靠右显示

This commit is contained in:
zqm
2025-11-05 15:42:02 +08:00
parent 721643cce4
commit ad5e1caa16

View File

@@ -8,8 +8,8 @@
:class="['tab-item', { 'active': activeTabIndex === index }]"
@click="setActiveTab(index)"
>
<div class="flex w-full justify-between items-center">
<span class="tab-title">{{ panel.title }}</span>
<span class="tab-spacer"></span>
<button
class="button-icon p-[2px] rounded hover:opacity-100 opacity-80"
@click.stop="closeTab(panel.id)"
@@ -21,6 +21,7 @@
</svg>
</button>
</div>
</div>
<div class="tab-placeholder"></div>
</div>
<!-- Tab页内容区域 -->
@@ -113,7 +114,7 @@ const closeTab = (tabId) => {
font-size: 12px;
user-select: none;
position: relative;
width: fit-content;
min-width: 120px;
}
.tab-title {
@@ -122,12 +123,7 @@ const closeTab = (tabId) => {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 8px;
}
.tab-spacer {
flex: 1;
min-width: 0;
}
.tab-item.active {