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

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

View file

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