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

修改TabPage页标签，添加专用容器确保标题靠左显示

Browse Source
This commit is contained in:
zqm
2025-11-05 15:07:23 +08:00
parent 9027ba9e81
commit b686eca45f
1 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,7 @@
:class="['tab-item', { 'active': activeTabIndex === index }]" :class="['tab-item', { 'active': activeTabIndex === index }]"
@click="setActiveTab(index)" @click="setActiveTab(index)"
> >
{{ panel.title }} <div class="tab-title">{{ panel.title }}</div>
<button <button
class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" class="button-icon p-[2px] rounded hover:opacity-100 opacity-80"
@click.stop="closeTab(panel.id)" @click.stop="closeTab(panel.id)"
@@ -115,6 +115,15 @@ const closeTab = (tabId) => {
width: fit-content; width: fit-content;
} }
.tab-title {
text-align: left;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tab-item.active { .tab-item.active {
background: #ffffff; background: #ffffff;
border: 1px solid #c7d2ea; border: 1px solid #c7d2ea;
@@ -144,7 +153,6 @@ const closeTab = (tabId) => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
order: 1;
} }
/* 确保在活动标签页中的按钮样式正确 */ /* 确保在活动标签页中的按钮样式正确 */