fix: 提交修改

src/views/virtualization/ImageManage.vue

@@ -59,7 +59,7 @@
           <el-tag :type="statusType(row.status)" size="small">{{ statusLabel(row.status) }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="同步状态" width="100">
+      <el-table-column v-if="isEmbeddedHost" label="同步状态" width="100">
         <template #default="{ row }">
           <el-tag :type="syncStatusType(row.sync_status)" size="small">{{ syncStatusLabel(row.sync_status) }}</el-tag>
         </template>
@@ -87,42 +87,45 @@
     </div>
 
     <!-- 新建/编辑弹窗 -->
-    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '创建镜像' : '编辑镜像'" width="560px" destroy-on-close>
+    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '创建镜像' : '编辑镜像'" width="560px" destroy-on-close class="tk-dialog">
       <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
-        <el-form-item label="名称" prop="name">
-          <el-input v-model="formData.name" placeholder="镜像名称" />
-        </el-form-item>
-        <el-form-item label="路径" prop="path">
-          <el-input v-model="formData.path" placeholder="URL 或服务器文件路径" />
-        </el-form-item>
-        <el-form-item label="系统类型" prop="os_type">
-          <el-select v-model="formData.os_type" style="width: 100%">
-            <el-option label="Linux" value="linux" />
-            <el-option label="Windows" value="windows" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="镜像类型" prop="type">
-          <el-select v-model="formData.type" style="width: 100%">
-            <el-option label="系统镜像" value="system" />
-            <el-option label="数据镜像" value="data" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="介绍">
-          <el-input v-model="formData.description" type="textarea" :rows="3" placeholder="镜像介绍（可选）" />
-        </el-form-item>
-        <template v-if="dialogType === 'edit'">
-          <el-form-item label="状态">
-            <el-select v-model="formData.status" style="width: 100%">
-              <el-option label="等待中" value="pending" />
-              <el-option label="下载中" value="downloading" />
-              <el-option label="就绪" value="ready" />
-              <el-option label="错误" value="error" />
+        <div class="tk-section">
+          <div class="tk-section-title">基本信息</div>
+          <el-form-item label="名称" prop="name">
+            <el-input v-model="formData.name" placeholder="镜像名称" />
+          </el-form-item>
+          <el-form-item label="路径" prop="path">
+            <el-input v-model="formData.path" placeholder="URL 或服务器文件路径" />
+          </el-form-item>
+          <el-form-item label="系统类型" prop="os_type">
+            <el-select v-model="formData.os_type" style="width: 100%">
+              <el-option label="Linux" value="linux" />
+              <el-option label="Windows" value="windows" />
             </el-select>
           </el-form-item>
-          <el-form-item label="大小">
-            <el-input-number v-model="formData.size" :min="0" style="width: 100%" />
+          <el-form-item label="镜像类型" prop="type">
+            <el-select v-model="formData.type" style="width: 100%">
+              <el-option label="系统镜像" value="system" />
+              <el-option label="数据镜像" value="data" />
+            </el-select>
           </el-form-item>
-        </template>
+          <el-form-item label="介绍">
+            <el-input v-model="formData.description" type="textarea" :rows="3" placeholder="镜像介绍（可选）" />
+          </el-form-item>
+          <template v-if="dialogType === 'edit'">
+            <el-form-item label="状态">
+              <el-select v-model="formData.status" style="width: 100%">
+                <el-option label="等待中" value="pending" />
+                <el-option label="下载中" value="downloading" />
+                <el-option label="就绪" value="ready" />
+                <el-option label="错误" value="error" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="大小">
+              <el-input-number v-model="formData.size" :min="0" style="width: 100%" />
+            </el-form-item>
+          </template>
+        </div>
       </el-form>
       <template #footer>
         <el-button @click="dialogVisible = false">取消</el-button>
@@ -177,37 +180,47 @@
     </el-dialog>
 
     <!-- 同步到宿主机弹窗 -->
-    <el-dialog v-model="syncDialogVisible" title="同步镜像到宿主机" width="440px" destroy-on-close>
+    <el-dialog v-model="syncDialogVisible" title="同步镜像到宿主机" width="480px" destroy-on-close class="tk-dialog">
       <el-form label-width="100px">
-        <el-form-item label="目标宿主机" required>
-          <el-input v-if="isEmbeddedHost" :model-value="currentHostLabel" disabled style="width: 100%" />
-          <el-select v-else v-model="syncHostId" placeholder="请选择宿主机" filterable style="width: 100%" v-loading="hostOptionsLoading">
-            <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>
+        <div class="tk-section">
+          <div class="tk-section-title">同步配置</div>
+          <el-form-item label="目标宿主机" required>
+            <el-input v-if="isEmbeddedHost" :model-value="currentHostLabel" disabled style="width: 100%" />
+            <el-select v-else v-model="syncHostId" placeholder="请选择宿主机" filterable style="width: 100%" v-loading="hostOptionsLoading">
+              <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>
+        </div>
       </el-form>
       <template #footer>
-        <el-button @click="syncDialogVisible = false">取消</el-button>
-        <el-button type="primary" :loading="syncLoading" @click="submitSyncToHost">确定同步</el-button>
+        <div class="tk-dialog-footer">
+          <el-button @click="syncDialogVisible = false">取消</el-button>
+          <el-button type="primary" :loading="syncLoading" @click="submitSyncToHost">确定同步</el-button>
+        </div>
       </template>
     </el-dialog>
 
     <!-- 重下载到宿主机弹窗 -->
-    <el-dialog v-model="reloadDialogVisible" title="重新下载镜像到宿主机" width="440px" destroy-on-close>
+    <el-dialog v-model="reloadDialogVisible" title="重新下载镜像到宿主机" width="480px" destroy-on-close class="tk-dialog">
       <el-form label-width="100px">
-        <el-form-item label="镜像">
-          <el-input :model-value="reloadTarget?.name" disabled />
-        </el-form-item>
-        <el-form-item label="目标宿主机" required>
-          <el-input v-if="isEmbeddedHost" :model-value="currentHostLabel" disabled style="width: 100%" />
-          <el-select v-else v-model="reloadHostId" placeholder="请选择宿主机" style="width: 100%" v-loading="hostOptionsLoading">
-            <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>
+        <div class="tk-section">
+          <div class="tk-section-title">重下载配置</div>
+          <el-form-item label="镜像">
+            <el-input :model-value="reloadTarget?.name" disabled />
+          </el-form-item>
+          <el-form-item label="目标宿主机" required>
+            <el-input v-if="isEmbeddedHost" :model-value="currentHostLabel" disabled style="width: 100%" />
+            <el-select v-else v-model="reloadHostId" placeholder="请选择宿主机" style="width: 100%" v-loading="hostOptionsLoading">
+              <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>
+        </div>
       </el-form>
       <template #footer>
-        <el-button @click="reloadDialogVisible = false">取消</el-button>
-        <el-button type="warning" :loading="reloadLoading" @click="submitReloadOnHost">确定重下载</el-button>
+        <div class="tk-dialog-footer">
+          <el-button @click="reloadDialogVisible = false">取消</el-button>
+          <el-button type="warning" :loading="reloadLoading" @click="submitReloadOnHost">确定重下载</el-button>
+        </div>
       </template>
     </el-dialog>
   </div>
@@ -345,7 +358,7 @@ const loadList = async () => {
     if (hostId) {
       res = await getImageCompareHost({ service_id: serviceId.value, host_id: hostId })
     } else {
-      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 (keyword.value) params.keyword = keyword.value
       if (filterOsType.value) params.os_type = filterOsType.value
       if (filterType.value) params.type = filterType.value
@@ -611,16 +624,5 @@ defineExpose({ loadList })
 
 <style scoped>
 .image-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; }
-.pagination-wrapper { display: flex; justify-content: flex-end; margin-top: 16px; }
-.mono-text { font-family: 'Consolas', monospace; color: #409eff; font-size: 13px; }
 .host-status-section { margin-top: 8px; }
-:deep(.el-table) { --el-table-header-bg-color: #fafafa; }
-:deep(.el-table th) { font-weight: 600; color: #303133; font-size: 13px; }
 </style>