feat(kvm): 宿主机管理树表点击体验优化
宿主机组行整行可点击触发展开/折叠;宿主机行点击名称直接跳转详情页。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -22,8 +22,10 @@
|
|||||||
:header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }">
|
:header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }">
|
||||||
<el-table-column label="名称" min-width="280">
|
<el-table-column label="名称" min-width="280">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<div class="tree-name-cell" :style="{ paddingLeft: (row._depth * 24) + 'px' }">
|
<div class="tree-name-cell" :style="{ paddingLeft: (row._depth * 24) + 'px' }"
|
||||||
<span v-if="row._isGroup" class="expand-icon" @click="toggleExpand(row)">
|
:class="{ 'clickable-group': row._isGroup, 'clickable-host': row._isHost }"
|
||||||
|
@click="row._isGroup ? toggleExpand(row) : (row._isHost ? handleGoHostDetail(row) : null)">
|
||||||
|
<span v-if="row._isGroup" class="expand-icon">
|
||||||
<el-icon v-if="row._loading"><Loading /></el-icon>
|
<el-icon v-if="row._loading"><Loading /></el-icon>
|
||||||
<el-icon v-else :class="{ 'is-expanded': row._expanded }"><ArrowRight /></el-icon>
|
<el-icon v-else :class="{ 'is-expanded': row._expanded }"><ArrowRight /></el-icon>
|
||||||
</span>
|
</span>
|
||||||
@@ -924,6 +926,24 @@ onMounted(() => { if (serviceId.value) loadTreeData() })
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
padding: 4px 0;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background 0.15s;
|
||||||
|
}
|
||||||
|
.tree-name-cell.clickable-group {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.tree-name-cell.clickable-group:hover {
|
||||||
|
background: #f5f7fa;
|
||||||
|
}
|
||||||
|
.tree-name-cell.clickable-host {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.tree-name-cell.clickable-host:hover {
|
||||||
|
background: #ecf5ff;
|
||||||
|
}
|
||||||
|
.tree-name-cell.clickable-host:hover .row-name {
|
||||||
|
color: #409eff;
|
||||||
}
|
}
|
||||||
.expand-icon {
|
.expand-icon {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
Reference in New Issue
Block a user