feat: 对接虚拟化平台管理

src/views/virtualization/ImageDetail.vue

@@ -9,7 +9,8 @@
       <div class="header-right">
         <el-button type="primary" plain :icon="Edit" @click="handleEdit">编辑</el-button>
         <el-button type="success" plain @click="handleSyncToHost">同步到宿主机</el-button>
-        <el-button type="warning" plain @click="handleReloadOnHost">重下载</el-button>
+        <el-button type="warning" plain @click="handleReloadMaster">主控端重新下载</el-button>
+        <el-button type="warning" plain @click="handleReloadOnHost">指定宿主机重新下载</el-button>
         <el-button plain :icon="Refresh" @click="loadDetail" :loading="loading">刷新</el-button>
         <el-button type="danger" plain :icon="Delete" @click="handleDelete">删除</el-button>
       </div>
@@ -50,7 +51,7 @@
         <el-table :data="hostStatusList" size="small" stripe border v-loading="statusLoading">
           <el-table-column prop="host_id" label="宿主机ID" width="100" />
           <el-table-column label="宿主机" min-width="120">
-            <template #default="{ row }">{{ getHostName(row.host_id) }}</template>
+            <template #default="{ row }">{{ row.host_name || getHostName(row.host_id) }}</template>
           </el-table-column>
           <el-table-column label="状态" width="100">
             <template #default="{ row }">
@@ -127,15 +128,16 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted, onActivated, onDeactivated, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeft, Refresh, Edit, Delete } from '@element-plus/icons-vue'
 import {
   getImageDetail, getImageHostStatus, updateImage, deleteImage,
-  syncImageToHost, reloadImageOnHost, getRemoteHostList
+  syncImageToHost, reloadImage, reloadImageOnHost, getRemoteHostList
 } from '@/api/admin/kvmService'
 import { useTagsViewStore } from '@/store/tagsViewStore'
+import { extractApiError } from '@/utils/kvmErrorUtil'
 
 const route = useRoute()
 const router = useRouter()
@@ -165,8 +167,8 @@ const formRules = {
   path: [{ required: true, message: '请输入路径', trigger: 'blur' }]
 }
 
-const statusType = (s) => ({ ready: 'success', downloading: 'warning', pending: 'info', error: 'danger' }[s] || 'info')
-const statusLabel = (s) => ({ ready: '就绪', downloading: '下载中', pending: '等待中', error: '错误' }[s] || s || '-')
+const statusType = (s) => ({ ready: 'success', success: 'success', downloading: 'warning', pending: 'info', error: 'danger', failed: 'danger', not_found: 'warning' }[s] || 'info')
+const statusLabel = (s) => ({ ready: '就绪', success: '已同步', downloading: '下载中', pending: '等待中', error: '错误', failed: '失败', not_found: '未同步' }[s] || s || '-')
 const formatSize = (bytes) => {
   if (!bytes) return '0 B'; const units = ['B', 'KB', 'MB', 'GB', 'TB']; let i = 0; let size = Number(bytes)
   while (size >= 1024 && i < units.length - 1) { size /= 1024; i++ }
@@ -197,18 +199,34 @@ const loadDetail = async () => {
     const res = await getImageDetail({ service_id: serviceId.value, image_id: imageId.value })
     if (res?.data?.code === 200 && res?.data?.data) {
       detail.value = res.data.data.image ?? res.data.data.data ?? res.data.data
-    } else ElMessage.error(res?.data?.message || '加载失败')
-  } catch { ElMessage.error('加载失败') } finally { loading.value = false }
+    } else ElMessage.error(extractApiError(res?.data, '加载失败'))
+  } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '加载失败')) } finally { loading.value = false }
 }
 
 const loadHostStatus = async () => {
+  if (!hostOptions.value.length) await loadHostOptions()
+  if (!hostOptions.value.length) return
   statusLoading.value = true
+  hostStatusList.value = []
   try {
-    const res = await getImageHostStatus({ service_id: serviceId.value, image_id: imageId.value })
-    if (res?.data?.code === 200 && res?.data?.data) {
-      const inner = res.data.data
-      hostStatusList.value = Array.isArray(inner) ? inner : (inner.hosts || inner.data || [])
-    }
+    const results = await Promise.allSettled(
+      hostOptions.value.map(h =>
+        getImageHostStatus({ service_id: serviceId.value, image_id: imageId.value, host_id: h.id })
+          .then(res => {
+            const body = res?.data
+            if (body?.code === 200 && body?.data) {
+              const d = body.data
+              const img = d.image || {}
+              return { host_id: h.id, host_name: h.name || h.ip, status: d.status || 'not_found', path: img.path || '', image_name: img.name || '', image_status: img.status || '' }
+            }
+            return { host_id: h.id, host_name: h.name || h.ip, status: 'not_found' }
+          })
+          .catch(() => ({ host_id: h.id, host_name: h.name || h.ip, status: 'error' }))
+      )
+    )
+    hostStatusList.value = results
+      .filter(r => r.status === 'fulfilled' && r.value)
+      .map(r => r.value)
   } catch { /* */ } finally { statusLoading.value = false }
 }
 
@@ -228,14 +246,30 @@ const handleSubmitEdit = () => {
       Object.keys(payload).forEach(k => { if (payload[k] === undefined) delete payload[k] })
       const res = await updateImage(payload)
       if (res?.data?.code === 200) { ElMessage.success('修改成功'); editDialogVisible.value = false; loadDetail() }
-      else ElMessage.error(res?.data?.message || '修改失败')
-    } catch { ElMessage.error('修改失败') } finally { submitLoading.value = false }
+      else ElMessage.error(extractApiError(res?.data, '修改失败'))
+    } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '修改失败')) } finally { submitLoading.value = false }
   })
 }
 
 const handleSyncToHost = () => { syncHostId.value = ''; syncDialogVisible.value = true }
 const handleReloadOnHost = () => { reloadHostId.value = ''; reloadDialogVisible.value = true }
 
+const handleReloadMaster = () => {
+  ElMessageBox.confirm(`确定要在主控端重新下载镜像「${detail.value?.name}」吗？`, '重新下载确认', {
+    confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
+  }).then(async () => {
+    actionLoading.value = true
+    try {
+      const fd = new FormData()
+      fd.append('service_id', serviceId.value)
+      fd.append('image_id', imageId.value)
+      const res = await reloadImage(fd)
+      if (res?.data?.code === 200) { ElMessage.success('已触发主控端重新下载'); loadDetail() }
+      else ElMessage.error(extractApiError(res?.data, '操作失败'))
+    } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '操作失败')) } finally { actionLoading.value = false }
+  }).catch(() => {})
+}
+
 const submitSync = async () => {
   if (!syncHostId.value) return ElMessage.warning('请选择宿主机')
   actionLoading.value = true
@@ -243,8 +277,8 @@ const submitSync = async () => {
     const fd = new FormData(); fd.append('service_id', serviceId.value); fd.append('image_id', imageId.value); fd.append('host_id', syncHostId.value)
     const res = await syncImageToHost(fd)
     if (res?.data?.code === 200) { ElMessage.success('已触发同步'); syncDialogVisible.value = false; loadHostStatus() }
-    else ElMessage.error(res?.data?.message || '同步失败')
-  } catch { ElMessage.error('同步失败') } finally { actionLoading.value = false }
+    else ElMessage.error(extractApiError(res?.data, '同步失败'))
+  } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '同步失败')) } finally { actionLoading.value = false }
 }
 
 const submitReload = async () => {
@@ -254,8 +288,8 @@ const submitReload = async () => {
     const fd = new FormData(); fd.append('service_id', serviceId.value); fd.append('image_id', imageId.value); fd.append('host_id', reloadHostId.value)
     const res = await reloadImageOnHost(fd)
     if (res?.data?.code === 200) { ElMessage.success('已触发重下载'); reloadDialogVisible.value = false; loadHostStatus() }
-    else ElMessage.error(res?.data?.message || '操作失败')
-  } catch { ElMessage.error('操作失败') } finally { actionLoading.value = false }
+    else ElMessage.error(extractApiError(res?.data, '操作失败'))
+  } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '操作失败')) } finally { actionLoading.value = false }
 }
 
 const handleDelete = () => {
@@ -265,8 +299,8 @@ const handleDelete = () => {
     try {
       const res = await deleteImage({ service_id: serviceId.value, image_id: imageId.value })
       if (res?.data?.code === 200) { ElMessage.success('删除成功'); goBack() }
-      else ElMessage.error(res?.data?.message || '删除失败')
-    } catch { ElMessage.error('删除失败') }
+      else ElMessage.error(extractApiError(res?.data, '删除失败'))
+    } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '删除失败')) }
   }).catch(() => {})
 }
 
@@ -275,7 +309,21 @@ const goBack = () => {
   router.push({ path: '/virtualization/kvm-service-detail', query: { service_id: serviceId.value, service_name: serviceName.value } })
 }
 
-onMounted(() => { loadHostOptions(); loadDetail(); loadHostStatus() })
+let loadedImageId = null
+let isPageActive = false
+
+const initPage = async () => {
+  if (!imageId.value || loadedImageId === imageId.value) return
+  loadedImageId = imageId.value
+  loadDetail()
+  await loadHostOptions()
+  loadHostStatus()
+}
+
+watch(imageId, () => { if (isPageActive) initPage() })
+onActivated(() => { isPageActive = true; if (loadedImageId !== imageId.value) initPage() })
+onDeactivated(() => { isPageActive = false })
+onMounted(() => { isPageActive = true; initPage() })
 </script>
 
 <style scoped>