ZengQingming/JoyD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

参考Panel标题栏实现，重构TabPage标签布局：添加中间flex容器使用justify-between确保标题靠左显示、关闭按钮靠右显示

Browse Source
This commit is contained in:
zqm
2025-11-05 15:33:30 +08:00
parent 2f28fb309d
commit 5c6a6c8d5a
1 changed files with 25 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue
View File

@@ -8,18 +8,22 @@
:class="['tab-item', { 'active': activeTabIndex === index }]"
@click="setActiveTab(index)"
>
<div class="tab-title">{{ panel.title }}</div>
<div class="tab-buttons">
<button
class="button-icon p-[2px] rounded hover:opacity-100 opacity-80"
@click.stop="closeTab(panel.id)"
aria-label="关闭"
>
<svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
<line x1="2" y1="2" x2="9" y2="9" stroke="#e6efff" stroke-width="1" />
<line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1" />
</svg>
</button>
<div class="flex items-center justify-between w-full">
<div class="tab-title-container">
<span class="tab-title-text">{{ panel.title }}</span>
</div>
<div class="tab-buttons-container">
<button
class="button-icon p-[2px] rounded hover:opacity-100 opacity-80"
@click.stop="closeTab(panel.id)"
aria-label="关闭"
>
<svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
<line x1="2" y1="2" x2="9" y2="9" stroke="#e6efff" stroke-width="1" />
<line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1" />
</svg>
</button>
</div>
</div>
</div>
<div class="tab-placeholder"></div>
@@ -102,7 +106,6 @@ const closeTab = (tabId) => {
.tab-item {
display: flex;
align-items: center;
justify-content: space-between;
height: 26px;
padding: 0 16px;
margin-left: 1px;
@@ -118,17 +121,22 @@ const closeTab = (tabId) => {
width: fit-content;
}
.tab-title {
.tab-title-container {
display: flex;
align-items: center;
flex: 1;
margin-right: 8px;
}
.tab-title-text {
text-align: left;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
margin-right: 8px;
}
.tab-buttons {
.tab-buttons-container {
display: flex;
align-items: center;
}