feat: 将页面添加分页

src/views/virtualization/BackupManage.vue

@@ -8,7 +8,7 @@
       <el-table-column prop="id" label="ID" width="60" />
       <el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip />
       <el-table-column prop="vm_id" label="虚拟机ID" width="90" />
-      <el-table-column prop="description" label="描述" min-width="160" show-overflow-tooltip />
+      <el-table-column prop="host_id" label="宿主机ID" width="90" />
       <el-table-column label="状态" width="90">
         <template #default="{ row }">
           <el-tag :type="taskStatusType(row.status)" size="small">
@@ -16,9 +16,17 @@
           </el-tag>
         </template>
       </el-table-column>
+      <el-table-column label="任务ID" width="160">
+        <template #default="{ row }">
+          <span style="font-family: Consolas, monospace; font-size: 12px">{{ row.task_id || '-' }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="创建时间" width="170">
         <template #default="{ row }">{{ formatTs(row.created_at) }}</template>
       </el-table-column>
+      <el-table-column label="更新时间" width="170">
+        <template #default="{ row }">{{ formatTs(row.updated_at) }}</template>
+      </el-table-column>
       <el-table-column label="操作" width="180" fixed="right">
         <template #default="{ row }">
           <el-button link type="primary" size="small" @click="handleRestore(row)">恢复</el-button>
@@ -28,7 +36,7 @@
       </el-table-column>
     </el-table>
     <el-empty v-if="!list.length && !loading" description="暂无备份数据" />
-    <div class="pagination-wrapper" v-if="total > pageSize">
+    <div class="pagination-wrapper" v-if="total > 0">
       <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
         :page-sizes="[10, 20, 50]" :total="total" layout="total, sizes, prev, pager, next"
         @size-change="s => { pageSize = s; currentPage = 1; loadList() }"
@@ -45,9 +53,6 @@
         <el-form-item label="备份名称" required>
           <el-input v-model="createForm.name" placeholder="请输入备份名称" />
         </el-form-item>
-        <el-form-item label="描述">
-          <el-input v-model="createForm.description" type="textarea" :rows="2" placeholder="可选描述" />
-        </el-form-item>
       </el-form>
       <template #footer>
         <el-button @click="createVisible = false">取消</el-button>
@@ -108,8 +113,8 @@ const loadList = async () => {
     const res = await getBackupList({ service_id: serviceId.value, page: currentPage.value, page_size: pageSize.value })
     if (res?.data?.code === 200 && res?.data?.data) {
       const d = res.data.data
-      list.value = d.backups || d.data || d.list || (Array.isArray(d) ? d : [])
-      total.value = d.meta?.count ?? d.all_count ?? d.total ?? list.value.length
+      list.value = d.data || d.list || (Array.isArray(d) ? d : [])
+      total.value = d.meta?.count ?? d.total ?? list.value.length
     } else { list.value = []; total.value = 0 }
   } catch { list.value = []; total.value = 0 } finally { loading.value = false }
 }
@@ -129,10 +134,10 @@ const loadVmOptions = async () => {
 }
 
 const createVisible = ref(false)
-const createForm = reactive({ vm_id: null, name: '', description: '' })
+const createForm = reactive({ vm_id: null, name: '' })
 
 const handleCreate = async () => {
-  Object.assign(createForm, { vm_id: null, name: '', description: '' })
+  Object.assign(createForm, { vm_id: null, name: '' })
   if (!vmOptions.value.length) await loadVmOptions()
   createVisible.value = true
 }
@@ -145,7 +150,6 @@ const submitCreate = async () => {
     fd.append('service_id', serviceId.value)
     fd.append('vm_id', createForm.vm_id)
     fd.append('name', createForm.name)
-    if (createForm.description) fd.append('description', createForm.description)
     const res = await createBackup(fd)
     if (res?.data?.code === 200) { ElMessage.success('备份创建成功'); createVisible.value = false; loadList() }
     else ElMessage.error(extractApiError(res?.data, '创建失败'))
@@ -224,6 +228,6 @@ onMounted(() => { loadList() })
 
 <style scoped>
 .backup-manage { padding: 0; }
-.toolbar { display: flex; gap: 8px; margin-bottom: 16px; }
+.toolbar { display: flex; gap: 8px; margin-top: 12px; margin-bottom: 16px; }
 .pagination-wrapper { display: flex; justify-content: flex-end; margin-top: 16px; }
 </style>