feat: 对接用户组网管理

src/views/virtualization/HostDetail.vue

@@ -36,9 +36,19 @@
           <span class="status-value">{{ detail.ip || '-' }}</span>
         </div>
         <div class="status-item">
-          <span class="status-label">资源</span>
-          <span class="status-value">{{ detail.max_cpu || 0 }}核 | {{ formatMemKB(detail.max_memory) }} | {{ formatDiskGB(detail.max_disk) }}</span>
+          <span class="status-label">CPU</span>
+          <span class="status-value">{{ detail.max_cpu || 0 }}核</span>
         </div>
+        <div class="status-item">
+          <span class="status-label">内存</span>
+          <span class="status-value">{{ formatMemKB(detail.max_memory) }}</span>
+        </div>
+        <div class="status-item">
+          <span class="status-label">磁盘</span>
+          <span class="status-value">{{ formatDiskGB(detail.max_disk) }}</span>
+        </div>
+      </div>
+      <div class="status-bar" v-if="detail">
         <div class="status-item">
           <span class="status-label">带宽</span>
           <span class="status-value">↓{{ detail.rx_bandwidth || 0 }} / ↑{{ detail.tx_bandwidth || 0 }} Mbps</span>
@@ -174,22 +184,22 @@
         </el-tab-pane>
 
         <el-tab-pane label="镜像管理" name="image">
-          <ImageManage v-if="hostTabLoaded['image']" />
+          <ImageManage v-if="hostTabLoaded['image']" ref="imageManageRef" />
         </el-tab-pane>
         <el-tab-pane label="网络管理" name="network">
-          <NetworkManage v-if="hostTabLoaded['network']" />
+          <NetworkManage v-if="hostTabLoaded['network']" ref="networkManageRef" />
         </el-tab-pane>
         <el-tab-pane label="数据卷管理" name="volume">
-          <VolumeManage v-if="hostTabLoaded['volume']" />
+          <VolumeManage v-if="hostTabLoaded['volume']" ref="volumeManageRef" />
         </el-tab-pane>
         <el-tab-pane label="虚拟机管理" name="vm">
-          <VmManage v-if="hostTabLoaded['vm']" />
+          <VmManage v-if="hostTabLoaded['vm']" ref="vmManageRef" />
         </el-tab-pane>
         <el-tab-pane label="快照管理" name="snapshot">
-          <SnapshotManage v-if="hostTabLoaded['snapshot']" />
+          <SnapshotManage v-if="hostTabLoaded['snapshot']" ref="snapshotManageRef" />
         </el-tab-pane>
         <el-tab-pane label="备份管理" name="backup">
-          <BackupManage v-if="hostTabLoaded['backup']" />
+          <BackupManage v-if="hostTabLoaded['backup']" ref="backupManageRef" />
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -283,21 +293,36 @@ const hostId = computed(() => parseInt(route.query.id) || 0)
 const activeTab = ref('info')
 const hostTabLoaded = reactive({ image: false, network: false, volume: false, vm: false, snapshot: false, backup: false })
 
+const imageManageRef = ref(null)
+const networkManageRef = ref(null)
+const volumeManageRef = ref(null)
+const vmManageRef = ref(null)
+const snapshotManageRef = ref(null)
+const backupManageRef = ref(null)
+const tabRefMap = { image: imageManageRef, network: networkManageRef, volume: volumeManageRef, vm: vmManageRef, snapshot: snapshotManageRef, backup: backupManageRef }
+
 watch(activeTab, (tab) => {
-  if (!['info', 'monitor'].includes(tab) && !hostTabLoaded[tab]) hostTabLoaded[tab] = true
+  if (!['info', 'monitor'].includes(tab)) {
+    if (!hostTabLoaded[tab]) {
+      hostTabLoaded[tab] = true
+    } else {
+      nextTick(() => { tabRefMap[tab]?.value?.loadList?.() })
+    }
+  }
   if (tab === 'monitor' && detail.value) { loadMetrics(); startPolling() }
   else stopPolling()
 })
 
-provide('embedded', true)
-provide('serviceId', serviceId)
-provide('serviceName', serviceName)
-provide('hostId', hostId)
-
 const loading = ref(false)
 const submitLoading = ref(false)
 const metricsLoading = ref(false)
 const detail = ref(null)
+
+provide('embedded', true)
+provide('serviceId', serviceId)
+provide('serviceName', serviceName)
+provide('hostId', hostId)
+provide('hostDetail', detail)
 const showToken = ref(false)
 const showPassword = ref(false)
 const showPrivateKey = ref(false)