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 16:13:03 +08:00
parent a50eed9a06
commit f4524ad6fd
1 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,18 +8,22 @@
:class="['tab-item', { 'active': activeTabIndex === index }]" :class="['tab-item', { 'active': activeTabIndex === index }]"
@click="setActiveTab(index)" @click="setActiveTab(index)"
> >
<div class="relative w-full"> <div class="flex items-center justify-between w-full px-16">
<span class="tab-title">{{ panel.title }}</span> <div class="flex items-center">
<button <span class="tab-title">{{ panel.title }}</span>
class="button-icon p-[2px] rounded hover:opacity-100 opacity-80 absolute right-0" </div>
@click.stop="closeTab(panel.id)" <div class="tab-buttons flex items-center">
aria-label="关闭" <button
> class="button-icon p-[2px] rounded hover:opacity-100 opacity-80"
<svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true"> @click.stop="closeTab(panel.id)"
<line x1="2" y1="2" x2="9" y2="9" stroke="#e6efff" stroke-width="1" /> aria-label="关闭"
<line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1" /> >
</svg> <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
</button> <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> </div>
<div class="tab-placeholder"></div> <div class="tab-placeholder"></div>
@@ -103,7 +107,6 @@ const closeTab = (tabId) => {
display: flex; display: flex;
align-items: center; align-items: center;
height: 26px; height: 26px;
padding: 0 16px;
margin-left: 1px; margin-left: 1px;
background: linear-gradient(to bottom, var(--vs-blue-top), var(--vs-blue-bottom)); background: linear-gradient(to bottom, var(--vs-blue-top), var(--vs-blue-bottom));
border-bottom-color: #c7d2ea; border-bottom-color: #c7d2ea;
@@ -113,7 +116,6 @@ const closeTab = (tabId) => {
color: white; color: white;
font-size: 12px; font-size: 12px;
user-select: none; user-select: none;
position: relative;
min-width: 120px; min-width: 120px;
} }
@@ -123,7 +125,6 @@ const closeTab = (tabId) => {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
margin-right: 20px; /* 为关闭按钮留出空间 */
} }
.tab-item.active { .tab-item.active {
@@ -145,6 +146,11 @@ const closeTab = (tabId) => {
color: #333; color: #333;
} }
.tab-buttons {
display: flex;
align-items: center;
}
.button-icon { .button-icon {
background: transparent; background: transparent;
border: none; border: none;
@@ -152,7 +158,6 @@ const closeTab = (tabId) => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0;
} }
/* 确保在活动标签页中的按钮样式正确 */ /* 确保在活动标签页中的按钮样式正确 */