feat: 将页面添加分页

src/views/virtualization/KvmService.vue

@@ -29,21 +29,21 @@
     <!-- 服务列表 -->
     <el-table :data="serviceList" v-loading="loading" stripe style="width: 100%">
       <el-table-column prop="id" label="ID" width="80" />
-      <el-table-column prop="Name" label="服务名称" min-width="160" show-overflow-tooltip />
+      <el-table-column prop="name" label="服务名称" min-width="160" show-overflow-tooltip />
       <el-table-column label="服务地址" min-width="220">
         <template #default="{ row }">
-          <span class="host-addr">{{ row.Host }}:{{ row.Port }}</span>
+          <span class="host-addr">{{ row.host }}:{{ row.port }}</span>
         </template>
       </el-table-column>
       <el-table-column label="认证Token" min-width="160" show-overflow-tooltip>
         <template #default="{ row }">
-          <span v-if="row.Token" class="token-mask">{{ maskToken(row.Token) }}</span>
+          <span v-if="row.token" class="token-mask">{{ maskToken(row.token) }}</span>
           <span v-else class="text-muted">未设置</span>
         </template>
       </el-table-column>
-      <el-table-column prop="Note" label="备注" min-width="160" show-overflow-tooltip>
+      <el-table-column prop="note" label="备注" min-width="160" show-overflow-tooltip>
         <template #default="{ row }">
-          {{ row.Note || '-' }}
+          {{ row.note || '-' }}
         </template>
       </el-table-column>
       <el-table-column label="创建时间" width="170">
@@ -61,10 +61,10 @@
     </el-table>
 
     <!-- 分页 -->
-    <div class="pagination-wrapper" v-if="total > queryParams.count">
+    <div class="pagination-wrapper" v-if="total > 0">
       <el-pagination
         v-model:current-page="queryParams.page"
-        v-model:page-size="queryParams.count"
+        v-model:page-size="queryParams.page_size"
         :page-sizes="[10, 20, 50]"
         :total="total"
         layout="total, sizes, prev, pager, next, jumper"
@@ -130,7 +130,7 @@ const searchKey = ref('')
 
 const queryParams = reactive({
   page: 1,
-  count: 10,
+  page_size: 10,
   key: ''
 })
 
@@ -154,18 +154,16 @@ const formRules = {
   port: [{ required: true, message: '请输入服务端口', trigger: 'blur' }]
 }
 
-// 规范化后端 PascalCase 字段为前端 camelCase
-// 同时保留原始字段以便在需要时直接访问
 const normalizeService = (item) => {
   if (!item) return item
   return {
-    ...item, // 保留原始字段（如 Id、Name 等）
-    id: item.Id ?? item.id,
-    name: item.Name ?? item.name,
-    host: item.Host ?? item.host,
-    port: item.Port ?? item.port,
-    token: item.Token ?? item.token,
-    note: item.Note ?? item.note,
+    ...item,
+    id: item.id ?? item.Id,
+    name: item.name ?? item.Name,
+    host: item.host ?? item.Host,
+    port: item.port ?? item.Port,
+    token: item.token ?? item.Token,
+    note: item.note ?? item.Note,
     CreatedAt: item.CreatedAt ?? item.created_at,
     UpdatedAt: item.UpdatedAt ?? item.updated_at,
   }
@@ -207,7 +205,7 @@ const handleSearch = () => {
 }
 
 const handleSizeChange = (size) => {
-  queryParams.count = size
+  queryParams.page_size = size
   queryParams.page = 1
   loadList()
 }
@@ -249,16 +247,15 @@ const handleAdd = () => {
   dialogVisible.value = true
 }
 
-// 编辑
 const handleEdit = (row) => {
   dialogType.value = 'edit'
   Object.assign(formData, {
-    id: Number(row.Id ?? row.id),
-    name: row.Name ?? row.name,
-    host: row.Host ?? row.host,
-    port: row.Port ?? row.port,
-    token: row.Token ?? row.token ?? '',
-    note: row.Note ?? row.note ?? ''
+    id: Number(row.id),
+    name: row.name,
+    host: row.host,
+    port: row.port,
+    token: row.token ?? '',
+    note: row.note ?? ''
   })
   dialogVisible.value = true
 }
@@ -305,20 +302,18 @@ const handleSubmit = () => {
   })
 }
 
-// 删除
 const handleDelete = (row) => {
-  const rawId = row.Id ?? row.id
-  if (!rawId) {
+  if (!row.id) {
     ElMessage.error('无法获取服务ID')
     return
   }
-  ElMessageBox.confirm(`确定要删除主控服务「${row.Name}」吗？删除后不可恢复。`, '删除确认', {
+  ElMessageBox.confirm(`确定要删除主控服务「${row.name}」吗？删除后不可恢复。`, '删除确认', {
     confirmButtonText: '确定删除',
     cancelButtonText: '取消',
     type: 'warning'
   }).then(async () => {
     try {
-      const res = await deleteKvmService({ id: Number(rawId) })
+      const res = await deleteKvmService({ id: Number(row.id) })
       const body = res?.data
       if (body?.code === 200) {
         ElMessage.success('删除成功')
@@ -332,10 +327,9 @@ const handleDelete = (row) => {
   }).catch(() => {})
 }
 
-// 查看详情 —— 跳转到详情页面
 const handleViewDetail = (row) => {
-  const id = Number(row.Id ?? row.id)
-  const name = row.Name ?? row.name
+  const id = Number(row.id)
+  const name = row.name
   if (!id) {
     ElMessage.error('无法获取服务ID，请刷新列表后重试')
     return