src/views/virtualization/HostTreeManage.vue

@@ -22,8 +22,10 @@
       :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }">
       <el-table-column label="名称" min-width="280">
         <template #default="{ row }">
-          <div class="tree-name-cell" :style="{ paddingLeft: (row._depth * 24) + 'px' }">
-            <span v-if="row._isGroup" class="expand-icon" @click="toggleExpand(row)">
+          <div class="tree-name-cell" :style="{ paddingLeft: (row._depth * 24) + 'px' }"
+            :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-else :class="{ 'is-expanded': row._expanded }"><ArrowRight /></el-icon>
             </span>
@@ -924,6 +926,24 @@ onMounted(() => { if (serviceId.value) loadTreeData() })
   display: flex;
   align-items: center;
   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 {
   cursor: pointer;