1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-10-09 15:06:37 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: Handle overflow for node names with ellipsis truncation (#9360)

Browse source
This commit is contained in:
ssongliu 2025-07-01 15:45:32 +08:00 • committed by GitHub
parent ba6a4fe6d7
commit 810ea9c421
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 9 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/layout/components/Sidebar/components/Collapse.vue
View file

@ -14,7 +14,7 @@
<el-badge is-dot :value="taskCount" :show-zero="false" :offset="[5, 5]">
<el-button link @click="openChangeNode" @mouseenter="openChangeNode">
<SvgIcon class="icon" iconName="p-gerenzhongxin1" />
{{ loadCurrentName() }}
<span class="ellipsis-text">{{ loadCurrentName() }}</span>
</el-button>
</el-badge>
</div>
@ -121,10 +121,7 @@ const loadCurrentName = () => {
if (globalStore.currentNode === 'local') {
return i18n.global.t('xpack.node.master');
}
if (globalStore.currentNode.length <= 15) {
return globalStore.currentNode;
}
return globalStore.currentNode.substring(0, 12) + '...';
return globalStore.currentNode;
}
return i18n.global.t('xpack.node.master');
};
@ -315,4 +312,11 @@ onMounted(() => {
.dropdown-item:hover {
background: var(--el-menu-item-bg-color-active);
}
.ellipsis-text {
display: inline-block;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>