1. 列表居中

web/pages/main.html

@@ -298,17 +298,16 @@
                 columns: [
                     { title: '对比名称', key: 'model_name' },
                     { title: '描述', key: 'description', render: (val) => val || '-' },
-                    { title: '模型列表', key: 'models', render: (val) => {
+                    { title: '相关模型', key: 'models', render: (val) => {
                         if (!val) return '-';
                         try {
-                            const models = typeof val === 'string' ? JSON.parse(val) : val;
+                            const modelIds = typeof val === 'string' ? JSON.parse(val) : val;
-                            return models.length + '个模型';
+                            return getModelNames(modelIds);
                         } catch { return '-'; }
                     }},
-                    { title: '状态', key: 'status', render: (val) => `<span class="px-2 py-1 rounded text-xs ${val === 'running' ? 'bg-green-100 text-green-700' : val === 'stopped' ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-700'}">${val}</span>` },
                     { title: '创建时间', key: 'create_time', render: (val) => val ? new Date(val).toLocaleString('zh-CN') : '-' }
                 ],
-                actions: ['delete']
+                actions: ['compare', 'delete']
             },
             'dataset-manage': {
                 title: '数据集管理',
@@ -404,7 +403,8 @@
             'preview': '预览',
             'download': '下载',
             'detail': '详情',
-            'edit': '编辑'
+            'edit': '编辑',
+            'compare': '开始对比'
         };
 
         // 页面加载完成后初始化
@@ -415,6 +415,9 @@
                 tableConfigs['data-generate'].customTools = JSON.parse(savedCustomTools);
             }
 
+            // 加载模型列表缓存（用于模型对比显示模型名称）
+            loadModelListCache();
+
             // 检查URL参数
             const urlParams = new URLSearchParams(window.location.search);
             const pageParam = urlParams.get('page');
@@ -703,6 +706,11 @@
             window.open(`${baseUrl}/api/dataset-manage/download/${datasetId}`, '_blank');
         }
 
+        // 开始模型对比
+        async function startCompare(id) {
+            showMessage('提示', '模型对比功能开发中...', 'info');
+        }
+
         // 筛选表格
         function filterTable() {
             const searchInput = document.getElementById('tableSearchInput');
@@ -756,7 +764,7 @@
 
             // 多选列头
             const selectAllHeader = supportsMultiSelect ? `
-                <th class="px-4 py-3 text-left font-medium w-10">
+                <th class="px-4 py-3 text-center font-medium w-10">
                     <input type="checkbox" class="w-4 h-4 text-primary rounded border-gray-300 cursor-pointer"
                         onchange="toggleSelectAll(this, '${config.api}')">
                 </th>
@@ -787,27 +795,27 @@
                             <thead>
                                 <tr class="table-header-bg text-gray-500 text-sm">
                                     ${selectAllHeader}
-                                    ${columns.map(col => `<th class="px-4 py-3 text-left font-medium">${col.title}</th>`).join('')}
+                                    ${columns.map(col => `<th class="px-4 py-3 text-center font-medium">${col.title}</th>`).join('')}
-                                    <th class="px-4 py-3 text-left font-medium">操作</th>
+                                    <th class="px-4 py-3 text-center font-medium">操作</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 ${hasData ? data.map(item => `
                                     <tr class="border-b border-gray-100 table-row-hover ${selectedItems.has(item.id) ? 'bg-blue-50' : ''}">
                                         ${supportsMultiSelect ? `
-                                            <td class="px-4 py-4 text-sm">
+                                            <td class="px-4 py-4 text-sm text-center">
                                                 <input type="checkbox" class="w-4 h-4 text-primary rounded border-gray-300 cursor-pointer"
                                                     ${selectedItems.has(item.id) ? 'checked' : ''}
                                                     onchange="toggleItemSelection(${item.id}, '${config.api}')">
                                             </td>
                                         ` : ''}
                                         ${columns.map(col => `
-                                            <td class="px-4 py-4 text-sm">
+                                            <td class="px-4 py-4 text-sm text-center">
                                                 ${col.render ? col.render(item[col.key]) : (item[col.key] || '-')}
                                             </td>
                                         `).join('')}
-                                        <td class="px-4 py-4 text-sm">
+                                        <td class="px-4 py-4 text-sm text-center">
-                                            <div class="flex space-x-2">
+                                            <div class="flex justify-center space-x-2">
                                                 ${config.actions.map(action => {
                                                     let onclick = '';
                                                     let btnClass = 'text-primary hover:text-primary/80';
@@ -820,6 +828,8 @@
                                                         onclick = `window.location.href = 'dataset-preview.html?id=${item.id}'`;
                                                     } else if (action === 'download' && config.api === 'dataset-manage') {
                                                         onclick = `downloadDataset('${item.id}')`;
+                                                    } else if (action === 'compare' && config.api === 'model-compare') {
+                                                        onclick = `startCompare(${item.id})`;
                                                     } else {
                                                         onclick = `showMessage('提示', '${actionLabels[action] || action}功能开发中...', 'info')`;
                                                     }
@@ -1359,6 +1369,35 @@
         let currentParentPage = null;
         let selectedItems = new Set(); // 存储选中的项ID
         let currentPageData = []; // 存储当前页面数据
+        let modelListCache = []; // 模型列表缓存
+
+        // 加载模型列表缓存
+        async function loadModelListCache() {
+            try {
+                const response = await fetch(`${API_BASE}/model-manage`);
+                const result = await response.json();
+                if (result.code === 0) {
+                    modelListCache = result.data || [];
+                }
+            } catch (e) {
+                console.error('加载模型列表失败:', e);
+                modelListCache = [];
+            }
+        }
+
+        // 根据模型ID获取模型名称
+        function getModelName(modelId) {
+            const model = modelListCache.find(m => m.id === modelId);
+            return model ? model.name : `模型${modelId}`;
+        }
+
+        // 根据模型ID列表获取模型名称列表
+        function getModelNames(modelIds) {
+            if (!modelIds || !Array.isArray(modelIds)) return '-';
+            return modelIds.map(id => getModelName(id)).join(', ');
+        }
+
+        // 页面初始化时加载模型列表缓存
 
         // 显示创建表单页面
         function showCreateModal(apiType) {