优化审核管理：添加详情弹窗替代alert显示，改进表格显示关键参数预览

templates/admin.html

@@ -324,12 +324,13 @@
                             <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">产品名称</th>
                             <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">分类</th>
                             <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">来源</th>
+                            <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">提交者</th>
                             <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">提交时间</th>
                             <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">状态</th>
                             <th class="px-4 py-3 text-center text-sm font-medium text-gray-600">操作</th>
                         </tr>
                     </thead>
-                    <tbody id="reviewsTable"><tr><td colspan="6" class="text-center text-gray-400 py-8">加载中...</td></tr></tbody>
+                    <tbody id="reviewsTable"><tr><td colspan="7" class="text-center text-gray-400 py-8">加载中...</td></tr></tbody>
                 </table>
             </div>
         </section>
@@ -479,6 +480,22 @@
         </div>
     </div>
     
+    <!-- 审核详情弹窗 -->
+    <div id="reviewDetailModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
+        <div class="bg-white rounded-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-auto">
+            <div class="p-6 border-b flex justify-between items-center sticky top-0 bg-white z-10">
+                <h2 class="text-xl font-bold text-gray-800"><i class="ri-file-search-line mr-2 text-blue-600"></i>审核详情</h2>
+                <button onclick="closeReviewDetailModal()" class="text-gray-400 hover:text-gray-600"><i class="ri-close-line text-2xl"></i></button>
+            </div>
+            <div id="reviewDetailContent" class="p-6">
+                <!-- 动态内容 -->
+            </div>
+            <div id="reviewDetailActions" class="p-6 border-t flex justify-end gap-4 sticky bottom-0 bg-white">
+                <!-- 操作按钮 -->
+            </div>
+        </div>
+    </div>
+
     <!-- 参数字段编辑弹框 -->
     <div id="fieldModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
         <div class="bg-white rounded-xl max-w-lg w-full mx-4">
@@ -3194,7 +3211,7 @@
                 
                 if (reviews.length === 0) {
                     document.getElementById('reviewsTable').innerHTML = `
-                        <tr><td colspan="6" class="text-center text-gray-400 py-8">暂无数据</td></tr>
+                        <tr><td colspan="7" class="text-center text-gray-400 py-8">暂无数据</td></tr>
                     `;
                     return;
                 }
@@ -3207,20 +3224,34 @@
                 
                 const html = reviews.map(r => {
                     const catName = categories.find(c => c.id === r.category_id)?.name || r.category_id;
+                    // 提取关键参数预览
+                    const data = r.data || {};
+                    const previewFields = [];
+                    ['organization', 'model_type', 'parameters', 'context_length', 'release_year'].forEach(key => {
+                        if (data[key]) previewFields.push(`<span class="text-gray-500">${data[key]}</span>`);
+                    });
+                    const preview = previewFields.length > 0 ? previewFields.slice(0, 3).join(' · ') : '-';
+                    
                     return `
-                        <tr class="border-b hover:bg-gray-50">
-                            <td class="px-4 py-3 font-medium text-gray-800">${r.data?.name || '-'}</td>
+                        <tr class="border-b hover:bg-gray-50 ${r.status === 'pending' ? 'bg-orange-50/30' : ''}">
+                            <td class="px-4 py-3">
+                                <div class="font-medium text-gray-800">${r.data?.name || '-'}</div>
+                                <div class="text-xs text-gray-400 mt-1">${preview}</div>
+                            </td>
                             <td class="px-4 py-3 text-gray-600">${catName}</td>
                             <td class="px-4 py-3 text-sm">
                                 ${r.source === 'api' ? '<span class="text-indigo-600">API</span>' : '<span class="text-gray-500">网页</span>'}
                             </td>
+                            <td class="px-4 py-3 text-sm">
+                                ${r.submitter ? `<span class="text-gray-600">${r.submitter}</span>` : '<span class="text-gray-400">匿名</span>'}
+                            </td>
                             <td class="px-4 py-3 text-sm text-gray-500">${r.created_at}</td>
                             <td class="px-4 py-3">${statusLabels[r.status] || r.status}</td>
                             <td class="px-4 py-3 text-center">
                                 ${r.status === 'pending' ? `
-                                    <button onclick="approveReview('${r.id}')" class="text-green-600 hover:text-green-800 mr-2" title="通过"><i class="ri-check-line"></i></button>
+                                    <button onclick="viewReviewDetail('${r.id}')" class="text-blue-600 hover:text-blue-800 mr-2" title="查看详情"><i class="ri-eye-line"></i></button>
+                                    <button onclick="approveReview('${r.id}')" class="text-green-600 hover:text-green-800 mr-1" title="通过"><i class="ri-check-line"></i></button>
                                     <button onclick="rejectReview('${r.id}')" class="text-red-600 hover:text-red-800" title="拒绝"><i class="ri-close-line"></i></button>
-                                    <button onclick="viewReviewDetail('${r.id}')" class="text-blue-600 hover:text-blue-800 ml-2" title="查看详情"><i class="ri-eye-line"></i></button>
                                 ` : `
                                     <button onclick="viewReviewDetail('${r.id}')" class="text-blue-600 hover:text-blue-800" title="查看详情"><i class="ri-eye-line"></i></button>
                                 `}
@@ -3232,7 +3263,7 @@
                 document.getElementById('reviewsTable').innerHTML = html;
             } catch (e) {
                 document.getElementById('reviewsTable').innerHTML = `
-                    <tr><td colspan="6" class="text-center text-red-500 py-8">加载失败: ${e.message}</td></tr>
+                    <tr><td colspan="7" class="text-center text-red-500 py-8">加载失败: ${e.message}</td></tr>
                 `;
             }
         }
@@ -3279,26 +3310,205 @@
             }
         }
 
+        // 当前审核详情ID
+        let currentReviewId = '';
+
         // 查看审核详情
         async function viewReviewDetail(reviewId) {
+            currentReviewId = reviewId;
             try {
                 const res = await fetch(`/api/reviews/${reviewId}`);
                 const review = await res.json();
                 
-                let html = '<div class="space-y-4">';
-                html += `<div><span class="text-gray-500">状态:</span> ${review.status}</div>`;
-                html += `<div><span class="text-gray-500">分类:</span> ${review.category_id}</div>`;
-                html += `<div><span class="text-gray-500">来源:</span> ${review.source}</div>`;
-                html += `<div><span class="text-gray-500">提交时间:</span> ${review.created_at}</div>`;
-                html += '<div class="border-t pt-4"><h3 class="font-medium mb-2">产品数据:</h3>';
-                html += '<pre class="bg-gray-50 p-3 rounded text-sm overflow-auto max-h-60">' + JSON.stringify(review.data, null, 2) + '</pre>';
-                html += '</div></div>';
+                const catName = categories.find(c => c.id === review.category_id)?.name || review.category_id;
+                const statusLabels = {
+                    pending: '<span class="px-3 py-1 bg-orange-100 text-orange-700 rounded-full text-sm">待审核</span>',
+                    approved: '<span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm">已通过</span>',
+                    rejected: '<span class="px-3 py-1 bg-red-100 text-red-700 rounded-full text-sm">已拒绝</span>'
+                };
                 
-                alert(html.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim());
+                let html = `
+                    <div class="space-y-6">
+                        <!-- 基本信息 -->
+                        <div class="bg-gray-50 rounded-lg p-4">
+                            <h3 class="text-sm font-semibold text-gray-500 mb-3"><i class="ri-information-line mr-1"></i>基本信息</h3>
+                            <div class="grid grid-cols-2 gap-4">
+                                <div><span class="text-gray-400 text-sm">状态：</span>${statusLabels[review.status] || review.status}</div>
+                                <div><span class="text-gray-400 text-sm">分类：</span><span class="font-medium text-gray-800">${catName}</span></div>
+                                <div><span class="text-gray-400 text-sm">来源：</span><span class="text-gray-800">${review.source === 'api' ? 'API提交' : '网页提交'}</span></div>
+                                <div><span class="text-gray-400 text-sm">提交者：</span><span class="text-gray-800">${review.submitter || '匿名'}</span></div>
+                                <div class="col-span-2"><span class="text-gray-400 text-sm">提交时间：</span><span class="text-gray-800">${review.created_at}</span></div>
+                            </div>
+                            ${review.status === 'rejected' && review.reject_reason ? `
+                                <div class="mt-3 pt-3 border-t border-gray-200">
+                                    <span class="text-gray-400 text-sm">拒绝原因：</span>
+                                    <span class="text-red-600">${review.reject_reason}</span>
+                                </div>
+                            ` : ''}
+                            ${review.status === 'approved' ? `
+                                <div class="mt-3 pt-3 border-t border-gray-200">
+                                    <span class="text-gray-400 text-sm">审核通过时间：</span>
+                                    <span class="text-green-600">${review.approved_at || '-'}</span>
+                                </div>
+                            ` : ''}
+                        </div>
+                        
+                        <!-- 产品数据 -->
+                        <div class="border rounded-lg p-4">
+                            <h3 class="text-sm font-semibold text-gray-500 mb-3"><i class="ri-database-2-line mr-1"></i>产品数据</h3>
+                            <div class="space-y-3">
+                                ${renderProductData(review.data, review.category_id)}
+                            </div>
+                        </div>
+                    </div>
+                `;
+                
+                document.getElementById('reviewDetailContent').innerHTML = html;
+                
+                // 操作按钮
+                let actionsHtml = '';
+                if (review.status === 'pending') {
+                    actionsHtml = `
+                        <button onclick="closeReviewDetailModal()" class="px-4 py-2 bg-gray-200 text-gray-600 rounded-lg hover:bg-gray-300">关闭</button>
+                        <button onclick="rejectReviewFromModal()" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"><i class="ri-close-line mr-1"></i>拒绝</button>
+                        <button onclick="approveReviewFromModal()" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"><i class="ri-check-line mr-1"></i>通过</button>
+                    `;
+                } else {
+                    actionsHtml = `<button onclick="closeReviewDetailModal()" class="px-4 py-2 bg-gray-200 text-gray-600 rounded-lg hover:bg-gray-300">关闭</button>`;
+                }
+                document.getElementById('reviewDetailActions').innerHTML = actionsHtml;
+                
+                document.getElementById('reviewDetailModal').classList.remove('hidden');
             } catch (e) {
                 alert('加载失败: ' + e.message);
             }
         }
+        
+        // 渲染产品数据（格式化显示）
+        function renderProductData(data, categoryId) {
+            if (!data) return '<div class="text-gray-400">无数据</div>';
+            
+            // 获取分类的字段配置
+            const cat = categories.find(c => c.id === categoryId);
+            const fields = cat ? (cat.fields || []) : [];
+            
+            // 排序字段：名称放第一
+            const sortedFields = [...fields].sort((a, b) => {
+                if (a.key === 'name') return -1;
+                if (b.key === 'name') return 1;
+                return 0;
+            });
+            
+            let html = '';
+            
+            // 先显示有字段配置的值
+            sortedFields.forEach(field => {
+                const value = data[field.key];
+                if (value !== undefined && value !== null && value !== '') {
+                    html += renderFieldRow(field, value);
+                }
+            });
+            
+            // 再显示其他没有字段配置的值
+            Object.keys(data).forEach(key => {
+                if (!fields.find(f => f.key === key)) {
+                    const value = data[key];
+                    if (value !== undefined && value !== null && value !== '') {
+                        html += `<div class="flex py-2 border-b border-gray-100 last:border-0">
+                            <div class="w-1/3 text-gray-500 text-sm">${key}</div>
+                            <div class="w-2/3 text-gray-800">${formatValue(value)}</div>
+                        </div>`;
+                    }
+                }
+            });
+            
+            return html || '<div class="text-gray-400">无数据</div>';
+        }
+        
+        // 渲染单个字段行
+        function renderFieldRow(field, value) {
+            const label = field.label || field.key;
+            const type = field.type || 'text';
+            let displayValue = formatValue(value, type);
+            
+            return `<div class="flex py-2 border-b border-gray-100 last:border-0">
+                <div class="w-1/3 text-gray-500 text-sm">${label}</div>
+                <div class="w-2/3 text-gray-800">${displayValue}</div>
+            </div>`;
+        }
+        
+        // 格式化值
+        function formatValue(value, type = 'text') {
+            if (value === null || value === undefined) return '-';
+            if (typeof value === 'boolean') return value ? '<span class="text-green-600">是</span>' : '<span class="text-gray-400">否</span>';
+            if (typeof value === 'object') {
+                if (Array.isArray(value)) {
+                    if (value.length === 0) return '-';
+                    // 如果是图片数组
+                    if (typeof value[0] === 'string' && (value[0].startsWith('http') || value[0].startsWith('/'))) {
+                        return value.map(url => `<img src="${url}" class="inline-block w-16 h-16 object-cover rounded mr-2 cursor-pointer hover:opacity-80" onclick="window.open('${url}', '_blank')">`).join('');
+                    }
+                    return value.join(', ');
+                }
+                return `<pre class="bg-gray-50 p-2 rounded text-xs overflow-auto">${JSON.stringify(value, null, 2)}</pre>`;
+            }
+            if (type === 'url' || (typeof value === 'string' && value.startsWith('http'))) {
+                return `<a href="${value}" target="_blank" class="text-blue-600 hover:underline">${value}</a>`;
+            }
+            return String(value);
+        }
+        
+        // 关闭审核详情弹窗
+        function closeReviewDetailModal() {
+            document.getElementById('reviewDetailModal').classList.add('hidden');
+            currentReviewId = '';
+        }
+        
+        // 从弹窗中通过审核
+        async function approveReviewFromModal() {
+            if (!currentReviewId) return;
+            if (!confirm('确认通过该产品审核？')) return;
+            try {
+                const res = await fetch(`/api/reviews/${currentReviewId}/approve`, {method: 'POST'});
+                const data = await res.json();
+                if (data.error) {
+                    alert('操作失败: ' + data.error);
+                } else {
+                    alert('审核通过，产品已发布！');
+                    closeReviewDetailModal();
+                    loadReviews();
+                    loadNotificationCounts();
+                    loadOverview();
+                }
+            } catch (e) {
+                alert('操作失败: ' + e.message);
+            }
+        }
+        
+        // 从弹窗中拒绝审核
+        async function rejectReviewFromModal() {
+            if (!currentReviewId) return;
+            const reason = prompt('请输入拒绝原因（可选）:');
+            if (reason === null) return; // 用户取消
+            try {
+                const res = await fetch(`/api/reviews/${currentReviewId}/reject`, {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({reason})
+                });
+                const data = await res.json();
+                if (data.error) {
+                    alert('操作失败: ' + data.error);
+                } else {
+                    alert('已拒绝该产品！');
+                    closeReviewDetailModal();
+                    loadReviews();
+                    loadNotificationCounts();
+                }
+            } catch (e) {
+                alert('操作失败: ' + e.message);
+            }
+        }
 
         init();
     </script>

templates/index.html

@@ -56,8 +56,20 @@
             </div>
         </div>
 
+        <!-- 搜索结果区域 -->
+        <div id="searchResults" class="hidden mb-8">
+            <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                <i class="ri-search-line text-indigo-600"></i>
+                搜索结果
+                <span id="searchKeyword" class="text-sm text-gray-500"></span>
+            </h2>
+            <div id="searchContent">
+                <!-- 动态填充 -->
+            </div>
+        </div>
+
         <!-- 热门模型 -->
-        <div class="bg-white rounded-xl shadow-sm p-6">
+        <div id="hotModels" class="bg-white rounded-xl shadow-sm p-6">
             <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
                 <i class="ri-cpu-line text-indigo-600"></i>
                 热门模型
@@ -241,8 +253,123 @@
         // 搜索
         async function search() {
             const keyword = document.getElementById('searchInput').value.trim();
-            if (!keyword) return;
-            window.location.href = `/models?q=${encodeURIComponent(keyword)}`;
+            if (!keyword) {
+                // 清空搜索时恢复原页面
+                document.getElementById('searchResults').classList.add('hidden');
+                document.getElementById('hotModels').classList.remove('hidden');
+                document.getElementById('statsCards').classList.remove('hidden');
+                document.getElementById('categoryCards').parentElement.classList.remove('hidden');
+                return;
+            }
+            
+            // 调用全局搜索 API
+            const res = await fetch(`/api/search?q=${encodeURIComponent(keyword)}`);
+            const data = await res.json();
+            
+            // 显示搜索结果区域
+            document.getElementById('searchResults').classList.remove('hidden');
+            document.getElementById('searchKeyword').textContent = `"${keyword}"`;
+            document.getElementById('hotModels').classList.add('hidden');
+            
+            // 渲染搜索结果
+            renderSearchResults(data, keyword);
+        }
+
+        // 渲染搜索结果
+        function renderSearchResults(data, keyword) {
+            const models = data.models || [];
+            const gpus = data.gpus || [];
+            const cpus = data.cpus || [];
+            const total = models.length + gpus.length + cpus.length;
+            
+            if (total === 0) {
+                document.getElementById('searchContent').innerHTML = `
+                    <div class="bg-white rounded-xl shadow-sm p-8 text-center">
+                        <i class="ri-search-line text-4xl text-gray-300 mb-4"></i>
+                        <p class="text-gray-500">未找到与 "${keyword}" 相关的结果</p>
+                    </div>
+                `;
+                return;
+            }
+            
+            let html = `<div class="bg-white rounded-xl shadow-sm p-4 mb-4 text-sm text-gray-600">找到 ${total} 条结果</div>`;
+            
+            // AI模型结果
+            if (models.length > 0) {
+                html += `
+                    <div class="bg-white rounded-xl shadow-sm p-6 mb-4">
+                        <h3 class="font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                            <i class="ri-robot-line text-blue-500"></i>
+                            AI模型 (${models.length})
+                        </h3>
+                        <div class="grid grid-cols-2 gap-3">
+                            ${models.map(m => `
+                                <a href="/models" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition">
+                                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-sm">
+                                        ${m.name.substring(0, 2)}
+                                    </div>
+                                    <div class="flex-1">
+                                        <div class="font-medium text-gray-800">${m.name}</div>
+                                        <div class="text-xs text-gray-500">${m.organization || ''}</div>
+                                    </div>
+                                </a>
+                            `).join('')}
+                        </div>
+                    </div>
+                `;
+            }
+            
+            // GPU结果
+            if (gpus.length > 0) {
+                html += `
+                    <div class="bg-white rounded-xl shadow-sm p-6 mb-4">
+                        <h3 class="font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                            <i class="ri-cpu-line text-green-500"></i>
+                            GPU显卡 (${gpus.length})
+                        </h3>
+                        <div class="grid grid-cols-2 gap-3">
+                            ${gpus.map(g => `
+                                <a href="/gpus" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition">
+                                    <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 font-bold text-sm">
+                                        ${g.name.substring(0, 2)}
+                                    </div>
+                                    <div class="flex-1">
+                                        <div class="font-medium text-gray-800">${g.name}</div>
+                                        <div class="text-xs text-gray-500">${g.manufacturer || ''} | ${g.memory_gb || ''}GB</div>
+                                    </div>
+                                </a>
+                            `).join('')}
+                        </div>
+                    </div>
+                `;
+            }
+            
+            // CPU结果
+            if (cpus.length > 0) {
+                html += `
+                    <div class="bg-white rounded-xl shadow-sm p-6 mb-4">
+                        <h3 class="font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                            <i class="ri-cpu-line text-purple-500"></i>
+                            CPU处理器 (${cpus.length})
+                        </h3>
+                        <div class="grid grid-cols-2 gap-3">
+                            ${cpus.map(c => `
+                                <a href="/cpus" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition">
+                                    <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold text-sm">
+                                        ${c.name.substring(0, 2)}
+                                    </div>
+                                    <div class="flex-1">
+                                        <div class="font-medium text-gray-800">${c.name}</div>
+                                        <div class="text-xs text-gray-500">${c.manufacturer || ''} | ${c.cores || ''}核</div>
+                                    </div>
+                                </a>
+                            `).join('')}
+                        </div>
+                    </div>
+                `;
+            }
+            
+            document.getElementById('searchContent').innerHTML = html;
         }
 
         // 初始化