fix: 提交修改

2026-04-15 16:02:36 +08:00
parent 2f06aa9f5f
commit b3ed406f84
61 changed files with 7476 additions and 7226 deletions
@@ -49,9 +49,10 @@
          <span v-else class="text-muted">-</span>
        </template>
      </el-table-column>
-      <el-table-column label="状态" width="100">
+      <el-table-column label="状态" width="140">
        <template #default="{ row }">
          <el-tag :type="vmStatusType(row.status)" size="small">{{ vmStatusLabel(row.status) }}</el-tag>
+          <el-tag v-if="row.data_migrate_status && !['completed','failed','aborted','cancelled'].includes(row.data_migrate_status)" type="warning" size="small" effect="dark" style="margin-left:4px">迁移中</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column label="宿主机" width="140">
@@ -90,130 +91,142 @@
    </div>

    <!-- 创建弹窗 -->
-    <el-dialog v-model="createDialogVisible" title="创建虚拟机" width="800px" destroy-on-close>
-      <el-form ref="createFormRef" :model="createForm" :rules="createRules" label-width="120px">
-        <el-form-item label="名称"><el-input v-model="createForm.name" placeholder="不填随机生成" /></el-form-item>
-        <el-form-item label="镜像" prop="image_id">
-          <div class="bind-selector-row">
-            <el-input :model-value="createForm.image_id ? `镜像 #${createForm.image_id}${createForm._imageName ? ' - ' + createForm._imageName : ''}` : '未选择'" disabled style="flex: 1" />
-            <el-button type="primary" @click="showCreateImageSelector = true" style="margin-left: 8px">选择</el-button>
-            <el-button v-if="createForm.image_id" @click="createForm.image_id = 0; createForm._imageName = ''" style="margin-left: 4px">清除</el-button>
-          </div>
-        </el-form-item>
-        <el-form-item label="用户" prop="user_id">
-          <div class="bind-selector-row">
-            <el-input :model-value="createForm.user_id ? `${createForm._userName || ''} (ID: ${createForm.user_id})` : '未选择'" disabled style="flex: 1" />
-            <el-button type="primary" @click="showUserSelector = true" style="margin-left: 8px">选择</el-button>
-            <el-button v-if="createForm.user_id" @click="createForm.user_id = 0; createForm._userName = ''" style="margin-left: 4px">清除</el-button>
-          </div>
-        </el-form-item>
-
-        <el-divider content-position="left">宿主机配置（二选一）</el-divider>
-        <template v-if="isEmbeddedHost">
-          <el-form-item label="宿主机">
-            <el-input :model-value="embeddedHostLabel" disabled />
-          </el-form-item>
-        </template>
-        <template v-else>
-          <el-form-item label="分配方式">
-            <el-radio-group v-model="hostMode">
-              <el-radio value="host">指定宿主机</el-radio>
-              <el-radio value="group">指定宿主机组</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="宿主机" v-if="hostMode === 'host'">
-            <el-select v-model="createForm.host_id" placeholder="选择宿主机" filterable style="width: 100%" @change="(v) => loadNetworkOptions(v)">
-              <el-option v-for="h in hostOptions" :key="h.id" :label="`${h.name} (${h.ip || h.id})`" :value="h.id" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="宿主机组" v-if="hostMode === 'group'">
+    <el-dialog v-model="createDialogVisible" title="创建虚拟机" width="800px" destroy-on-close class="tk-dialog">
+      <el-form ref="createFormRef" :model="createForm" :rules="createRules" label-width="100px">
+        <div class="tk-section">
+          <div class="tk-section-title">基本信息</div>
+          <el-form-item label="名称"><el-input v-model="createForm.name" placeholder="不填随机生成" /></el-form-item>
+          <el-form-item label="镜像" prop="image_id">
            <div class="bind-selector-row">
-              <el-input :model-value="createForm.host_group_id ? `${createForm._groupName || ''} (ID: ${createForm.host_group_id})` : '未选择'" disabled style="flex: 1" />
-              <el-button type="primary" @click="showHostGroupSelector = true" style="margin-left: 8px">选择</el-button>
-              <el-button v-if="createForm.host_group_id" @click="createForm.host_group_id = null; createForm._groupName = ''" style="margin-left: 4px">清除</el-button>
+              <el-input :model-value="createForm.image_id ? `镜像 #${createForm.image_id}${createForm._imageName ? ' - ' + createForm._imageName : ''}` : '未选择'" disabled style="flex: 1" />
+              <el-button type="primary" @click="showCreateImageSelector = true" style="margin-left: 8px">选择</el-button>
+              <el-button v-if="createForm.image_id" @click="createForm.image_id = 0; createForm._imageName = ''" style="margin-left: 4px">清除</el-button>
+            </div>
+          </el-form-item>
+          <el-form-item label="用户" prop="user_id">
+            <div class="bind-selector-row">
+              <el-input :model-value="createForm.user_id ? `${createForm._userName || ''} (ID: ${createForm.user_id})` : '未选择'" disabled style="flex: 1" />
+              <el-button type="primary" @click="showUserSelector = true" style="margin-left: 8px">选择</el-button>
+              <el-button v-if="createForm.user_id" @click="createForm.user_id = 0; createForm._userName = ''" style="margin-left: 4px">清除</el-button>
            </div>
          </el-form-item>
-        </template>
-
-        <el-divider content-position="left">资源配置</el-divider>
-        <div class="resource-row">
-          <div class="resource-item">
-            <span class="resource-label">* 内存</span>
-            <el-select v-model="memoryUnit" class="resource-unit-select">
-              <el-option v-for="u in memoryUnitOptions" :key="u.label" :label="u.label" :value="u.label" />
-            </el-select>
-            <el-input-number v-model="memoryDisplay" :min="0" controls-position="right" class="resource-input" />
-          </div>
-          <div class="resource-item">
-            <span class="resource-label">* 系统盘</span>
-            <el-select v-model="diskUnit" class="resource-unit-select">
-              <el-option v-for="u in diskUnitOptions" :key="u.label" :label="u.label" :value="u.label" />
-            </el-select>
-            <el-input-number v-model="diskDisplay" :min="0" controls-position="right" class="resource-input" />
-          </div>
-        </div>
-        <div class="resource-row">
-          <div class="resource-item">
-            <span class="resource-label">* CPU(核)</span>
-            <el-input-number v-model="createForm.vcpu" :min="0" controls-position="right" class="resource-input" />
-          </div>
-          <div class="resource-item">
-            <span class="resource-label">下行带宽(Mbps)</span>
-            <el-input-number v-model="createForm.rx_bandwidth" :min="0" controls-position="right" class="resource-input" />
-          </div>
-          <div class="resource-item">
-            <span class="resource-label">上行带宽(Mbps)</span>
-            <el-input-number v-model="createForm.tx_bandwidth" :min="0" controls-position="right" class="resource-input" />
-          </div>
        </div>

-        <el-divider content-position="left">网络配置（二选一）</el-divider>
-        <el-form-item label="IP分配方式">
-          <el-radio-group v-model="ipMode">
-            <el-radio value="num">按IP数量分配</el-radio>
-            <el-radio value="ids">选择网络IP</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-row :gutter="16" v-if="ipMode === 'num'">
-          <el-col :span="12">
+        <div class="tk-section">
+          <div class="tk-section-title">宿主机配置</div>
+          <template v-if="isEmbeddedHost">
+            <el-form-item label="宿主机">
+              <el-input :model-value="embeddedHostLabel" disabled />
+            </el-form-item>
+          </template>
+          <template v-else>
+            <el-form-item label="分配方式">
+              <el-radio-group v-model="hostMode">
+                <el-radio value="host">指定宿主机</el-radio>
+                <el-radio value="group">指定宿主机组</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="宿主机" v-if="hostMode === 'host'">
+              <el-select v-model="createForm.host_id" placeholder="选择宿主机" filterable style="width: 100%" @change="(v) => loadNetworkOptions(v)">
+                <el-option v-for="h in hostOptions" :key="h.id" :label="`${h.name} (${h.ip || h.id})`" :value="h.id" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="宿主机组" v-if="hostMode === 'group'">
+              <div class="bind-selector-row">
+                <el-input :model-value="createForm.host_group_id ? `${createForm._groupName || ''} (ID: ${createForm.host_group_id})` : '未选择'" disabled style="flex: 1" />
+                <el-button type="primary" @click="showHostGroupSelector = true" style="margin-left: 8px">选择</el-button>
+                <el-button v-if="createForm.host_group_id" @click="createForm.host_group_id = null; createForm._groupName = ''" style="margin-left: 4px">清除</el-button>
+              </div>
+            </el-form-item>
+          </template>
+        </div>
+
+        <div class="tk-section">
+          <div class="tk-section-title">资源配置</div>
+          <div class="tk-resource-grid">
+            <el-form-item label="CPU" required>
+              <el-input-number v-model="createForm.vcpu" :min="0" controls-position="right" /><span class="tk-res-unit">核</span>
+            </el-form-item>
+            <el-form-item label="内存" required>
+              <el-input-number v-model="memoryDisplay" :min="0" controls-position="right" />
+              <el-select v-model="memoryUnit" class="tk-unit-select">
+                <el-option v-for="u in memoryUnitOptions" :key="u.label" :label="u.label" :value="u.label" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="系统盘" required>
+              <el-input-number v-model="diskDisplay" :min="0" controls-position="right" />
+              <el-select v-model="diskUnit" class="tk-unit-select">
+                <el-option v-for="u in diskUnitOptions" :key="u.label" :label="u.label" :value="u.label" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="下行带宽">
+              <el-input-number v-model="createForm.rx_bandwidth" :min="0" controls-position="right" /><span class="tk-res-unit">Mbps</span>
+            </el-form-item>
+            <el-form-item label="上行带宽">
+              <el-input-number v-model="createForm.tx_bandwidth" :min="0" controls-position="right" /><span class="tk-res-unit">Mbps</span>
+            </el-form-item>
+          </div>
+          <el-form-item label="额外数据卷">
+            <div style="display:flex;align-items:center;gap:6px">
+              <el-input-number v-model="createForm.data_volume_size" :min="0" controls-position="right" style="width:200px" />
+              <span class="tk-res-unit">GB</span>
+              <span style="font-size:12px;color:#909399;margin-left:8px">0 表示不创建</span>
+            </div>
+          </el-form-item>
+        </div>
+
+        <div class="tk-section">
+          <div class="tk-section-title">网络配置</div>
+          <el-form-item label="IP分配方式">
+            <el-radio-group v-model="ipMode">
+              <el-radio value="num">按IP数量分配</el-radio>
+              <el-radio value="ids">选择网络IP</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <div class="tk-resource-grid" v-if="ipMode === 'num'">
            <el-form-item label="IPv4数量">
-              <el-input-number v-model="createForm.ipv4_num" :min="0" controls-position="right" style="width: 100%" />
+              <el-input-number v-model="createForm.ipv4_num" :min="0" controls-position="right" /><span class="tk-res-unit">个</span>
            </el-form-item>
-          </el-col>
-          <el-col :span="12">
            <el-form-item label="IPv6数量">
-              <el-input-number v-model="createForm.ipv6_num" :min="0" controls-position="right" style="width: 100%" />
+              <el-input-number v-model="createForm.ipv6_num" :min="0" controls-position="right" /><span class="tk-res-unit">个</span>
            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-form-item label="网络IP列表" v-if="ipMode === 'ids'">
-          <el-select v-model="createForm.network_ids" multiple filterable placeholder="选择可用网络IP" style="width: 100%">
-            <el-option v-for="n in networkOptions" :key="n.id" :label="`${n.name || ''} - ${n.address || n.ip || ''}`" :value="n.id" />
-          </el-select>
-          <div class="form-tip" v-if="!networkOptions.length">请先选择宿主机以加载可用网络（仅显示未使用的网络）</div>
-        </el-form-item>
+          </div>
+          <el-form-item label="网络IP列表" v-if="ipMode === 'ids'">
+            <el-select v-model="createForm.network_ids" multiple filterable placeholder="选择可用网络IP" style="width: 100%">
+              <el-option v-for="n in networkOptions" :key="n.id" :label="`${n.name || ''} - ${n.address || n.ip || ''}`" :value="n.id" />
+            </el-select>
+            <div class="form-tip" v-if="!networkOptions.length">请先选择宿主机以加载可用网络（仅显示未使用的网络）</div>
+          </el-form-item>
+        </div>
      </el-form>
      <template #footer>
-        <el-button @click="createDialogVisible = false">取消</el-button>
-        <el-button type="primary" :loading="submitLoading" @click="submitCreate">创建</el-button>
+        <div class="tk-dialog-footer">
+          <el-button @click="createDialogVisible = false">取消</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="submitCreate">创建</el-button>
+        </div>
      </template>
    </el-dialog>

    <!-- 重装弹窗 -->
-    <el-dialog v-model="rebuildDialogVisible" title="重装虚拟机" width="440px" destroy-on-close>
-      <el-alert title="重装会使用新镜像重置虚拟机，原数据可能丢失" type="warning" :closable="false" show-icon style="margin-bottom: 16px" />
+    <el-dialog v-model="rebuildDialogVisible" title="重装虚拟机" width="480px" destroy-on-close class="tk-dialog">
      <el-form label-width="100px">
-        <el-form-item label="虚拟机">{{ rebuildTarget?.name }} (#{{ rebuildTarget?.id }})</el-form-item>
-        <el-form-item label="新镜像" required>
-          <div class="bind-selector-row">
-            <el-input :model-value="rebuildImageId ? `镜像 #${rebuildImageId}${rebuildImageName ? ' - ' + rebuildImageName : ''}` : '未选择'" disabled style="flex: 1" />
-            <el-button type="primary" @click="showRebuildImageSelector = true" style="margin-left: 8px">选择</el-button>
-          </div>
-        </el-form-item>
+        <div class="tk-section">
+          <div class="tk-section-title">重装信息</div>
+          <el-alert title="重装会使用新镜像重置虚拟机，原数据可能丢失" type="warning" :closable="false" show-icon style="margin-bottom: 16px" />
+          <el-form-item label="虚拟机">{{ rebuildTarget?.name }} (#{{ rebuildTarget?.id }})</el-form-item>
+          <el-form-item label="新镜像" required>
+            <div class="bind-selector-row">
+              <el-input :model-value="rebuildImageId ? `镜像 #${rebuildImageId}${rebuildImageName ? ' - ' + rebuildImageName : ''}` : '未选择'" disabled style="flex: 1" />
+              <el-button type="primary" @click="showRebuildImageSelector = true" style="margin-left: 8px">选择</el-button>
+            </div>
+          </el-form-item>
+        </div>
      </el-form>
      <template #footer>
-        <el-button @click="rebuildDialogVisible = false">取消</el-button>
-        <el-button type="danger" :loading="submitLoading" @click="submitRebuild">确认重装</el-button>
+        <div class="tk-dialog-footer">
+          <el-button @click="rebuildDialogVisible = false">取消</el-button>
+          <el-button type="danger" :loading="submitLoading" @click="submitRebuild">确认重装</el-button>
+        </div>
      </template>
    </el-dialog>

@@ -294,19 +307,18 @@

        <!-- 指标 -->
        <template v-if="vmMetricsData">
-          <h4 style="margin: 16px 0 8px">实时指标</h4>
+          <h4 style="margin: 16px 0 8px">最新指标 <span style="font-size:12px; font-weight:400; color:#86909c">{{ formatBucket(vmMetricsData.bucket) }}</span></h4>
          <el-descriptions :column="2" border size="small">
-            <el-descriptions-item label="虚拟机">{{ vmMetricsData.vm_name || '-' }}</el-descriptions-item>
            <el-descriptions-item label="CPU使用率">
-              <span :style="{ color: vmMetricsData.cpu_usage_percent > 90 ? '#F56C6C' : vmMetricsData.cpu_usage_percent > 60 ? '#E6A23C' : '#67C23A' }">
-                {{ (vmMetricsData.cpu_usage_percent ?? 0).toFixed(1) }}%
+              <span :style="{ color: (vmMetricsData.cpu_usage ?? 0) > 90 ? '#F56C6C' : (vmMetricsData.cpu_usage ?? 0) > 60 ? '#E6A23C' : '#67C23A' }">
+                {{ (vmMetricsData.cpu_usage ?? 0).toFixed(1) }}%
              </span>
            </el-descriptions-item>
-            <template v-if="vmMetricsData.internet_speed && Object.keys(vmMetricsData.internet_speed).length">
-              <el-descriptions-item label="网络速率" :span="2">
-                <div v-for="(val, key) in vmMetricsData.internet_speed" :key="key">{{ key }}: {{ val }}</div>
-              </el-descriptions-item>
-            </template>
+            <el-descriptions-item label="内存">{{ formatMemKB(vmMetricsData.mem_used) }} / {{ formatMemKB(vmMetricsData.mem_total) }}</el-descriptions-item>
+            <el-descriptions-item label="磁盘读取">{{ formatBytesRaw(vmMetricsData.disk_read) }}</el-descriptions-item>
+            <el-descriptions-item label="磁盘写入">{{ formatBytesRaw(vmMetricsData.disk_write) }}</el-descriptions-item>
+            <el-descriptions-item label="网络接收">{{ formatNetSpeed(vmMetricsData.net_rx) }}</el-descriptions-item>
+            <el-descriptions-item label="网络发送">{{ formatNetSpeed(vmMetricsData.net_tx) }}</el-descriptions-item>
          </el-descriptions>
        </template>
      </div>
@@ -350,9 +362,9 @@ import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus, Refresh, Search, ArrowLeft, ArrowDown, WarningFilled } from '@element-plus/icons-vue'
 import {
-  getRemoteHostList, getVmList, getVmDetail, getVmStatus, getVmMetrics,
+  getRemoteHostList, getVmList, getVmDetail, getVmStatus,
  createVm, rebuildVm, startVm, stopVm, rebootVm, suspendVm,
-  resumeVm, rescueVm, exitRescueVm, deleteVm, getNetworkList
+  resumeVm, rescueVm, exitRescueVm, deleteVm, getNetworkList, getMetricsHistory
 } from '@/api/admin/kvmService'
 import { extractApiError } from '@/utils/kvmErrorUtil'
 import ImageSelectorPopup from '@/components/admin/ImageSelectorPopup.vue'
@@ -427,7 +439,7 @@ const diskDisplay = computed({
 const loadNetworkOptions = async (hid) => {
  if (!hid) return
  try {
-    const params = { service_id: serviceId.value, host_id: hid, used: false, page: 1, page_size: 10 }
+    const params = { service_id: serviceId.value, host_id: hid, used: false, page: 1, count: 10 }
    if (injectedHostId?.value) params.type = 'bridge'
    const res = await getNetworkList(params)
    const body = res?.data
@@ -476,7 +488,7 @@ const vmMetricsData = ref(null)

 const createForm = reactive({
  name: '', host_id: null, image_id: 0, vcpu: 0, memory: 0,
-  system_size: 0, rx_bandwidth: 0, tx_bandwidth: 0,
+  system_size: 0, rx_bandwidth: 0, tx_bandwidth: 0, data_volume_size: 0,
  host_group_id: null, user_id: 0, ipv4_num: 0, ipv6_num: 0, network_ids: [],
  _imageName: '', _groupName: '', _userName: ''
 })
@@ -501,7 +513,7 @@ const vmStatusLabel = (s) => ({
  reboot: '重启中', poweroff: '已关机', unknown: '未知'
 }[s] || s || '-')

-const formatMemory = (kb) => {
+const formatMemKB = (kb) => {
  if (!kb) return '-'
  kb = Number(kb)
  if (kb >= 1073741824) return (kb / 1073741824).toFixed(1) + ' TB'
@@ -509,6 +521,7 @@ const formatMemory = (kb) => {
  if (kb >= 1024) return (kb / 1024).toFixed(0) + ' MB'
  return kb + ' KB'
 }
+const formatMemory = formatMemKB

 const formatTimestamp = (ts) => {
  if (!ts) return '-'
@@ -532,6 +545,21 @@ const formatBytesRaw = (val) => {
  return val + ' B'
 }

+const formatNetSpeed = (v) => {
+  if (!v && v !== 0) return '0 B/s'
+  v = Number(v)
+  if (v >= 1073741824) return (v / 1073741824).toFixed(1) + ' GB/s'
+  if (v >= 1048576) return (v / 1048576).toFixed(1) + ' MB/s'
+  if (v >= 1024) return (v / 1024).toFixed(1) + ' KB/s'
+  return v.toFixed(0) + ' B/s'
+}
+
+const formatBucket = (bucket) => {
+  if (!bucket) return '-'
+  const d = new Date(bucket)
+  return isNaN(d.getTime()) ? String(bucket) : d.toLocaleString('zh-CN')
+}
+
 // 选择器回调
 const handleCreateImageSelected = (img) => { createForm.image_id = img.id; createForm._imageName = img.name }
 const handleRebuildImageSelected = (img) => { rebuildImageId.value = img.id; rebuildImageName.value = img.name }
@@ -542,7 +570,7 @@ const loadList = async () => {
  if (!serviceId.value) return
  loading.value = true
  try {
-    const params = { service_id: serviceId.value, page: queryParams.page, page_size: queryParams.page_size }
+    const params = { service_id: serviceId.value, page: queryParams.page, count: queryParams.page_size }
    if (hostId.value) params.host_id = hostId.value
    if (keyword.value) params.key = keyword.value
    if (filterStatus.value) params.status = filterStatus.value
@@ -562,7 +590,8 @@ const handleAdd = () => {
  Object.assign(createForm, {
    name: '', host_id: injectedHostId?.value || null, image_id: 0,
    vcpu: 0, memory: 0, system_size: 0,
-    rx_bandwidth: 0, tx_bandwidth: 0, host_group_id: null, user_id: 0, ipv4_num: 0, ipv6_num: 0, network_ids: [],
+    rx_bandwidth: 0, tx_bandwidth: 0, data_volume_size: 0,
+    host_group_id: null, user_id: 0, ipv4_num: 0, ipv6_num: 0, network_ids: [],
    _imageName: '', _groupName: '', _userName: ''
  })
  memoryUnit.value = 'GB'
@@ -570,6 +599,7 @@ const handleAdd = () => {
  hostMode.value = 'host'
  ipMode.value = 'num'
  networkOptions.value = []
+  loadHostOptions()
  createDialogVisible.value = true
  if (injectedHostId?.value) {
    loadNetworkOptions(injectedHostId.value)
@@ -596,6 +626,7 @@ const submitCreate = () => {
      if (createForm.name) fd.append('name', createForm.name)
      if (createForm.rx_bandwidth) fd.append('rx_bandwidth', createForm.rx_bandwidth)
      if (createForm.tx_bandwidth) fd.append('tx_bandwidth', createForm.tx_bandwidth)
+      if (createForm.data_volume_size > 0) fd.append('data_volume_size', createForm.data_volume_size)
      if (hostMode.value === 'host') fd.append('host_id', createForm.host_id)
      else fd.append('host_group_id', createForm.host_group_id)
      if (ipMode.value === 'num') {
@@ -737,9 +768,24 @@ const fetchVmStatus = async (vm) => {

 const fetchVmMetrics = async (vm) => {
  try {
-    const res = await getVmMetrics({ service_id: serviceId.value, vm_name: vm.name })
-    if (res?.data?.code === 200) vmMetricsData.value = res.data.data?.data ?? res.data.data
-    else ElMessage.warning('暂无指标数据')
+    const now = new Date()
+    const start = new Date(now.getTime() - 60 * 60 * 1000)
+    const res = await getMetricsHistory({
+      service_id: serviceId.value,
+      host_id: vm.host_id || hostId.value,
+      vm_name: vm.name,
+      start: start.toISOString(),
+      end_time: now.toISOString(),
+      interval: '1m'
+    })
+    const body = res?.data
+    if (body?.code === 200 && body?.data) {
+      const arr = Array.isArray(body.data) ? body.data : (body.data.data || [])
+      vmMetricsData.value = arr.length ? arr[arr.length - 1] : null
+      if (!vmMetricsData.value) ElMessage.warning('暂无指标数据')
+    } else {
+      ElMessage.warning('暂无指标数据')
+    }
  } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '获取指标失败')) }
 }

@@ -773,23 +819,5 @@ defineExpose({ loadList })

 <style scoped>
 .vm-manage-container { padding: 20px; }
-.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #ebeef5; }
-.header-left { display: flex; align-items: center; gap: 16px; }
-.header-info h3 { margin: 0; font-size: 18px; color: #303133; }
-.sub-info { font-size: 13px; color: #909399; }
-.header-right { display: flex; gap: 8px; }
-.embedded-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
-.filter-bar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
 .vm-config { display: flex; gap: 4px; flex-wrap: wrap; }
-.text-muted { color: #c0c4cc; }
-.pagination-wrapper { display: flex; justify-content: flex-end; margin-top: 16px; }
-.detail-actions { margin-top: 16px; display: flex; gap: 8px; }
-.bind-selector-row { display: flex; align-items: center; width: 100%; }
-:deep(.el-table) { --el-table-header-bg-color: #fafafa; }
-:deep(.el-table th) { font-weight: 600; color: #303133; font-size: 13px; }
-.resource-row { display: flex; gap: 20px; margin-bottom: 18px; }
-.resource-item { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
-.resource-label { white-space: nowrap; font-size: 14px; color: #606266; flex-shrink: 0; }
-.resource-unit-select { width: 72px; flex-shrink: 0; }
-.resource-input { flex: 1; min-width: 0; }
 </style>