新增“数据编辑”

# Conflicts:
#	app.py

app.py

@@ -295,7 +295,7 @@ def edit_entry(doc_id):
     
     # 保持原始数据格式，不进行JSON转换
     # 直接传递包含data字段的原始文档
-    return render_template('edit.html', document=document)
+    return render_template('edited.html', document=document)
 
 # 更新数据路由
 @app.route('/update/<doc_id>', methods=['POST'])
@@ -370,6 +370,29 @@ def delete_entry(doc_id):
     else:
         return "删除失败", 500
 
+# 批量删除数据路由
+@app.route('/batch_delete', methods=['POST'])
+def batch_delete():
+    """
+    批量删除数据
+    
+    返回:
+        重定向到所有数据页面或错误信息
+    """
+    doc_ids = request.form.getlist('doc_ids')
+    if not doc_ids:
+        return "没有选择要删除的文档", 400
+    
+    success_count = 0
+    for doc_id in doc_ids:
+        if delete_by_id(doc_id):
+            success_count += 1
+    
+    if success_count == len(doc_ids):
+        return redirect(url_for('show_all'))
+    else:
+        return f"成功删除 {success_count} 条记录，失败 {len(doc_ids) - success_count} 条", 500
+
 
 
 # 提供图片访问的路由

templates/all.html

@@ -27,50 +27,87 @@
         margin-bottom: 15px;
     }
 
-    /* 表格容器 - 顶部边距调整 */
+    /* 卡片容器样式 */
-    .table-container {
+    .data-cards {
-        overflow-x: auto;
+        display: grid;
-        margin-top: 15px; /* 减少顶部间距 */
+        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+        gap: 20px;
+        margin-bottom: 20px;
+    }
+
+    /* 卡片样式 */
+    .data-card {
+        background-color: white;
         border-radius: 8px;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        padding: 20px;
+        border: 1px solid #e0e0e0;
+        transition: transform 0.3s, box-shadow 0.3s;
     }
 
-    /* 表格样式 */
+    .data-card:hover {
-    table {
+        transform: translateY(-2px);
-        width: 100%;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-        border-collapse: collapse;
-        font-family: 'Segoe UI', Arial, sans-serif;
     }
 
-    /* 表头样式 */
+    /* 卡片头部样式 */
-    thead {
+    .card-header {
-        background: linear-gradient(135deg, #3498db, #1a5276);
+        display: flex;
-        color: white;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 15px;
+        padding-bottom: 15px;
+        border-bottom: 1px solid #f0f0f0;
     }
 
-    th {
+    .card-header h3 {
-        padding: 16px 12px;
+        margin: 0;
-        text-align: left;
+        color: #333;
+        font-size: 18px;
+    }
+
+    .card-actions {
+        display: flex;
+        gap: 8px;
+    }
+
+    /* 卡片内容样式 */
+    .card-content {
+        margin-bottom: 15px;
+    }
+
+    .field-item {
+        display: flex;
+        margin-bottom: 10px;
+        line-height: 1.5;
+    }
+
+    .field-key {
         font-weight: 600;
+        color: #333;
+        min-width: 120px;
+        margin-right: 10px;
     }
 
-    /* 表格行样式 */
+    .field-value {
-    tbody tr {
+        color: #666;
-        border-bottom: 1px solid #eef1f5;
+        flex: 1;
-        transition: background-color 0.3s;
+        word-break: break-word;
     }
 
-    tbody tr:nth-child(even) {
+    /* 卡片图片样式 */
-        background-color: #f8fafc;
+    .card-image {
+        text-align: center;
+        margin-top: 15px;
+        padding-top: 15px;
+        border-top: 1px solid #f0f0f0;
     }
 
-    tbody tr:hover {
+    .card-image img {
-        background-color: #e3f2fd;
+        max-width: 100%;
-    }
+        max-height: 200px;
-
+        border-radius: 4px;
-    td {
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        padding: 14px 12px;
-        color: #4a5568;
     }
 
     /* 操作按钮样式 */
@@ -128,6 +165,33 @@
         padding: 40px 0;
         color: #a0aec0;
         font-style: italic;
+        grid-column: 1 / -1;
+    }
+
+    /* 响应式设计 */
+    @media (max-width: 768px) {
+        .data-cards {
+            grid-template-columns: 1fr;
+        }
+        
+        .card-header {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 10px;
+        }
+        
+        .card-actions {
+            align-self: flex-end;
+        }
+        
+        .field-item {
+            flex-direction: column;
+        }
+        
+        .field-key {
+            min-width: auto;
+            margin-bottom: 5px;
+        }
     }
 </style>
 
@@ -135,44 +199,155 @@
     <h2>所有已录入的奖项信息</h2>
     <p>在此页面可以查看所有已录入的成果信息，并进行编辑和删除操作</p>
 
-    <div class="table-container">
+    <!-- 批量操作区域 -->
-        <table>
+    <div class="batch-operations" style="margin-bottom: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 8px; border: 1px solid #e0e0e0;">
-            <thead>
+        <div style="display: flex; align-items: center; gap: 15px;">
-                <tr>
+            <div style="display: flex; align-items: center; gap: 8px;">
-                    <th>比赛/论文名称</th>
+                <input type="checkbox" id="select-all" onchange="toggleSelectAll(this.checked)">
-                    <th>项目名称</th>
+                <label for="select-all" style="font-weight: 600; color: #333;">全选</label>
-                    <th>学生</th>
+            </div>
-                    <th>指导老师</th>
+            <button type="button" class="batch-delete-btn" onclick="batchDelete()" style="padding: 8px 16px; background-color: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; transition: background-color 0.3s;">
-                    <th style="text-align: center;">操作</th>
+                批量删除选中项
-                </tr>
+            </button>
-            </thead>
+            <span id="selected-count" style="color: #666; font-size: 14px;">已选择 0 项</span>
-            <tbody>
+        </div>
+    </div>
+
+    <div class="data-cards">
         {% if data %}
             {% for item in data %}
-                        <tr>
+                <div class="data-card">
-                            <td>{{ item.id or '无' }}</td>
+                    <div class="card-header">
-                            <td>{{ item.name or '无' }}</td>
+                        <div style="display: flex; align-items: center; gap: 15px;">
-                            <td>{% if item.students is string %}{{ item.students or '无' }}{% else %}{{ item.students|join(', ') if item.students else '无' }}{% endif %}</td>
+                            <input type="checkbox" class="doc-checkbox" value="{{ item._id }}" onchange="updateSelectedCount()">
-                            <td>{% if item.teacher is string %}{{ item.teacher or '无' }}{% else %}{{ item.teacher|join(', ') if item.teacher else '无' }}{% endif %}</td>
+                            <h3>记录 {{ loop.index }}</h3>
-                            <td style="text-align: center;">
-                                <div style="display: flex; justify-content: center; gap: 8px;">
-                                    <a href="{{ url_for('edit_entry', doc_id=item._id) }}" class="action-button edit-btn">编辑</a>
-                                    <form action="{{ url_for('delete_entry', doc_id=item._id) }}" method="POST" onsubmit="return confirm('确定要删除这条记录吗？')" style="margin: 0;">
-                                        <button type="submit" class="action-button delete-btn">删除</button>
-                                    </form>
                         </div>
-                            </td>
+                        <div class="card-actions">
-                        </tr>
+                            <a href="{{ url_for('edit_entry', doc_id=item._id) }}" class="action-button edit-btn">编辑</a>
+                        </div>
+                    </div>
+                    
+                    <div class="card-content">
+                        {% if item.data %}
+                            {# 从原始数据中解析字段 #}
+                            {% set data_string = item.data %}
+                            {% set pairs = data_string.split('|###|') %}
+                            
+                            {% for pair in pairs %}
+                                {% if ':' in pair %}
+                                    {% set key_value = pair.split(':', 1) %}
+                                    {% set field_key = key_value[0].strip() %}
+                                    {% set field_value = key_value[1].strip() %}
+                                    
+                                    {# 处理列表格式 [item1|##|item2] #}
+                                    {% if field_value.startswith('[') and field_value.endswith(']') %}
+                                        {% set list_content = field_value[1:-1] %}
+                                        {% set field_value = list_content.split('|##|')|join(', ') %}
+                                    {% endif %}
+                                    
+                                    <div class="field-item">
+                                        <span class="field-key">{{ field_key }}：</span>
+                                        <span class="field-value">{{ field_value or '无' }}</span>
+                                    </div>
+                                {% endif %}
                             {% endfor %}
                         {% else %}
-                    <tr>
+                            {# 如果没有data字段，显示解析后的字段 #}
-                        <td colspan="5" class="no-data">暂无数据</td>
+                            {% for key, value in item.items() %}
-                    </tr>
+                                {% if key not in ['_id', 'image'] %}
+                                    <div class="field-item">
+                                        <span class="field-key">{{ key }}：</span>
+                                        <span class="field-value">
+                                            {% if value is sequence and value is not string %}
+                                                {{ value|join(', ') if value else '无' }}
+                                            {% else %}
+                                                {{ value or '无' }}
+                                            {% endif %}
+                                        </span>
+                                    </div>
+                                {% endif %}
+                            {% endfor %}
+                        {% endif %}
+                    </div>
+                    
+
+                </div>
+            {% endfor %}
+        {% else %}
+            <div class="no-data">暂无数据</div>
         {% endif %}
-            </tbody>
-        </table>
     </div>
 
     <a href="{{ url_for('index') }}" class="back-btn">返回首页</a>
 </div>
+
+<script>
+// 全选/取消全选功能
+function toggleSelectAll(checked) {
+    const checkboxes = document.querySelectorAll('.doc-checkbox');
+    checkboxes.forEach(checkbox => {
+        checkbox.checked = checked;
+    });
+    updateSelectedCount();
+}
+
+// 更新选择计数
+function updateSelectedCount() {
+    const checkboxes = document.querySelectorAll('.doc-checkbox');
+    const selectedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
+    document.getElementById('selected-count').textContent = `已选择 ${selectedCount} 项`;
+    
+    // 更新全选复选框状态
+    const selectAllCheckbox = document.getElementById('select-all');
+    if (selectedCount === 0) {
+        selectAllCheckbox.checked = false;
+        selectAllCheckbox.indeterminate = false;
+    } else if (selectedCount === checkboxes.length) {
+        selectAllCheckbox.checked = true;
+        selectAllCheckbox.indeterminate = false;
+    } else {
+        selectAllCheckbox.checked = false;
+        selectAllCheckbox.indeterminate = true;
+    }
+}
+
+// 批量删除功能
+function batchDelete() {
+    const checkboxes = document.querySelectorAll('.doc-checkbox:checked');
+    if (checkboxes.length === 0) {
+        alert('请至少选择一条记录进行删除');
+        return;
+    }
+    
+    const confirmMessage = `确定要删除选中的 ${checkboxes.length} 条记录吗？此操作不可撤销。`;
+    if (!confirm(confirmMessage)) {
+        return;
+    }
+    
+    // 收集选中的文档ID
+    const docIds = Array.from(checkboxes).map(cb => cb.value);
+    
+    // 创建表单并提交
+    const form = document.createElement('form');
+    form.method = 'POST';
+    form.action = '/batch_delete';
+    
+    docIds.forEach(docId => {
+        const input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = 'doc_ids';
+        input.value = docId;
+        form.appendChild(input);
+    });
+    
+    document.body.appendChild(form);
+    form.submit();
+}
+
+// 页面加载时初始化
+document.addEventListener('DOMContentLoaded', function() {
+    updateSelectedCount();
+});
+</script>
+
 {% endblock %}

templates/edited.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}编辑数据 - 紫金·稷下薪火·云枢智海师生成果共创系统{% endblock %}
+{% block title %}编辑成果信息 - 紫金·稷下薪火·云枢智海师生成果共创系统{% endblock %}
 
 {% block content %}
 <style>

templates/index.html

@@ -20,72 +20,255 @@
         </button>
     </form>
 
-    <div id="result" class="mt-4"></div>
+    <!-- 编辑确认区域 -->
+    <div id="edit-section" class="mt-4" style="display: none;">
+        <div class="card">
+            <h3 style="color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 10px;">
+                <i class="fas fa-edit"></i> 识别结果 - 请确认并编辑数据
+            </h3>
+            <p class="mb-4">系统已识别出以下信息，您可以修改字段名和对应的数据值，确认无误后点击录入按钮</p>
+            
+            <form id="edit-form">
+                <div id="edit-fields"></div>
+                <div class="mt-4 text-center">
+                    <button type="button" id="confirm-btn" class="btn btn-success btn-lg">
+                        <i class="fas fa-check"></i> 确认录入
+                    </button>
+                    <button type="button" id="cancel-btn" class="btn btn-secondary btn-lg ml-3">
+                        <i class="fas fa-times"></i> 取消
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
 </div>
 
 <script>
+    let currentData = null;
+    let currentImage = null;
+
     document.getElementById("upload-form").addEventListener("submit", function (e) {
         e.preventDefault();
         let formData = new FormData(this);
-        const resultDiv = document.getElementById("result");
+        const editSection = document.getElementById("edit-section");
 
         // 显示上传进度动画
-        resultDiv.innerHTML = `
+        editSection.innerHTML = `
+            <div class="card">
                 <div class="progress-container">
                     <div class="progress-bar"></div>
                     <p class="progress-text">正在处理图片，请稍候...</p>
                 </div>
+            </div>
         `;
+        editSection.style.display = "block";
 
         fetch("/upload", { method: "POST", body: formData })
             .then(res => res.json())
             .then(data => {
                 if(data.error) {
-                    resultDiv.innerHTML = `
+                    editSection.innerHTML = `
+                        <div class="card">
                             <div class="alert alert-danger">
                                 <i class="fas fa-exclamation-circle"></i> 错误: ${data.error}
                             </div>
+                        </div>
                     `;
                 } else {
-                    const resultHtml = `
+                    // 存储当前数据
-                        <div class="result-card">
+                    currentData = data.data;
-                            <div class="result-header">
+                    currentImage = data.image;
-                                <h3><i class="fas fa-check-circle"></i> 识别成功</h3>
-                                <p class="timestamp">${new Date().toLocaleString()}</p>
-                            </div>
-                            <div class="result-content">
-                                ${Object.entries(data.data).map(([key, value]) => `
-                                    <div class="result-item">
-                                        <span class="result-label">${key.replace(/_/g, ' ')}</span>
-                                        <span class="result-value">${value}</span>
-                                    </div>
-                                `).join('')}
-                            </div>
-                            <div class="result-footer">
-                                <p class="success-message">${data.message}</p>
-                                <button class="btn btn-outline-primary copy-btn" data-clipboard-text="${JSON.stringify(data.data)}">
-                                    <i class="fas fa-copy"></i> 复制结果
-                                </button>
-                            </div>
-                        </div>
-                    `;
-                    resultDiv.innerHTML = resultHtml;
                     
-                    // 添加复制按钮功能
+                    // 生成编辑表单
-                    document.querySelector('.copy-btn').addEventListener('click', function() {
+                    generateEditForm(data.data);
-                        navigator.clipboard.writeText(this.getAttribute('data-clipboard-text'));
-                        alert('结果已复制到剪贴板！');
-                    });
                 }
             })
             .catch(error => {
-                resultDiv.innerHTML = `
+                editSection.innerHTML = `
+                    <div class="card">
                         <div class="alert alert-danger">
                             <i class="fas fa-exclamation-circle"></i> 上传失败: ${error}
                         </div>
+                    </div>
                 `;
             });
     });
+
+    function generateEditForm(data) {
+        const editSection = document.getElementById("edit-section");
+        let fieldsHtml = "";
+        
+        Object.entries(data).forEach(([key, value], index) => {
+            fieldsHtml += `
+                <div class="field-row mb-3">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <label class="form-label">字段名</label>
+                            <input type="text" class="form-control field-name" value="${key}" data-original-key="${key}">
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label">数据值</label>
+                            <input type="text" class="form-control field-value" value="${value}">
+                        </div>
+                        <div class="col-md-2 d-flex align-items-end">
+                            <button type="button" class="btn btn-danger btn-sm delete-field" title="删除此字段">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            `;
+        });
+        
+        editSection.innerHTML = `
+            <div class="card">
+                <h3 style="color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 10px;">
+                    <i class="fas fa-edit"></i> 识别结果 - 请确认并编辑数据
+                </h3>
+                <p class="mb-4">系统已识别出以下信息，您可以修改字段名和对应的数据值，确认无误后点击录入按钮</p>
+                
+                <form id="edit-form">
+                    <div id="edit-fields">
+                        ${fieldsHtml}
+                    </div>
+                    <div class="mb-3">
+                        <button type="button" id="add-field-btn" class="btn btn-outline-primary">
+                            <i class="fas fa-plus"></i> 添加字段
+                        </button>
+                    </div>
+                    <div class="mt-4 text-center">
+                        <button type="button" id="confirm-btn" class="btn btn-success btn-lg">
+                            <i class="fas fa-check"></i> 确认录入
+                        </button>
+                        <button type="button" id="cancel-btn" class="btn btn-secondary btn-lg ml-3">
+                            <i class="fas fa-times"></i> 取消
+                        </button>
+                    </div>
+                </form>
+            </div>
+        `;
+        
+        // 绑定删除按钮事件
+        document.querySelectorAll('.delete-field').forEach(btn => {
+            btn.addEventListener('click', function() {
+                this.closest('.field-row').remove();
+            });
+        });
+        
+        // 绑定添加字段按钮事件
+        document.getElementById('add-field-btn').addEventListener('click', function() {
+            const editFields = document.getElementById('edit-fields');
+            const newFieldHtml = `
+                <div class="field-row mb-3">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <label class="form-label">字段名</label>
+                            <input type="text" class="form-control field-name" value="" data-original-key="">
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label">数据值</label>
+                            <input type="text" class="form-control field-value" value="">
+                        </div>
+                        <div class="col-md-2 d-flex align-items-end">
+                            <button type="button" class="btn btn-danger btn-sm delete-field" title="删除此字段">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            `;
+            editFields.insertAdjacentHTML('beforeend', newFieldHtml);
+            
+            // 为新添加的删除按钮绑定事件
+            const newDeleteBtn = editFields.lastElementChild.querySelector('.delete-field');
+            newDeleteBtn.addEventListener('click', function() {
+                this.closest('.field-row').remove();
+            });
+        });
+        
+        // 绑定确认和取消按钮事件
+        bindConfirmCancelEvents();
+    }
+
+    function bindConfirmCancelEvents() {
+        // 确认录入按钮事件
+        document.getElementById("confirm-btn").addEventListener("click", function() {
+            const fieldRows = document.querySelectorAll('.field-row');
+            const editedData = {};
+            
+            // 收集编辑后的数据
+            fieldRows.forEach(row => {
+                const fieldName = row.querySelector('.field-name').value.trim();
+                const fieldValue = row.querySelector('.field-value').value.trim();
+                if (fieldName && fieldValue) {
+                    editedData[fieldName] = fieldValue;
+                }
+            });
+            
+            if (Object.keys(editedData).length === 0) {
+                alert('请至少保留一个有效的字段！');
+                return;
+            }
+            
+            // 发送确认请求
+            fetch("/confirm", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({
+                    data: editedData,
+                    image: currentImage
+                })
+            })
+            .then(res => res.json())
+            .then(data => {
+                const editSection = document.getElementById("edit-section");
+                
+                if(data.error) {
+                    editSection.innerHTML = `
+                        <div class="card">
+                            <div class="alert alert-danger">
+                                <i class="fas fa-exclamation-circle"></i> 录入失败: ${data.error}
+                            </div>
+                        </div>
+                    `;
+                } else {
+                    editSection.innerHTML = `
+                        <div class="card">
+                            <div class="alert alert-success">
+                                <i class="fas fa-check-circle"></i> ${data.message}
+                            </div>
+                        </div>
+                    `;
+                    // 重置表单
+                    document.getElementById("upload-form").reset();
+                    // 3秒后隐藏成功消息
+                    setTimeout(() => {
+                        editSection.style.display = "none";
+                    }, 3000);
+                }
+            })
+            .catch(error => {
+                const editSection = document.getElementById("edit-section");
+                editSection.innerHTML = `
+                    <div class="card">
+                        <div class="alert alert-danger">
+                            <i class="fas fa-exclamation-circle"></i> 录入失败: ${error}
+                        </div>
+                    </div>
+                `;
+            });
+        });
+
+        // 取消按钮事件
+        document.getElementById("cancel-btn").addEventListener("click", function() {
+            const editSection = document.getElementById("edit-section");
+            editSection.style.display = "none";
+            currentData = null;
+            currentImage = null;
+        });
+    }
 </script>
 
 <style>
@@ -222,6 +405,12 @@
         margin-bottom: 15px;
     }
 
+    .info-message {
+        color: var(--primary);
+        font-weight: 500;
+        margin-bottom: 15px;
+    }
+
     .btn-outline-primary {
         border: 1px solid var(--primary);
         color: var(--primary);
@@ -234,5 +423,195 @@
         background-color: var(--primary);
         color: white;
     }
+
+    .btn-success {
+        background: linear-gradient(135deg, #28a745, #20c997);
+        border: none;
+        border-radius: 30px;
+        padding: 12px 24px;
+        font-weight: 500;
+        transition: var(--transition);
+        box-shadow: 0 4px 8px rgba(40, 167, 69, 0.2);
+        color: white;
+    }
+
+    .btn-success:hover {
+        background: linear-gradient(135deg, #20c997, #28a745);
+        transform: translateY(-2px);
+        box-shadow: 0 6px 12px rgba(40, 167, 69, 0.3);
+    }
+
+    .btn-secondary {
+        background: linear-gradient(135deg, #6c757d, #495057);
+        border: none;
+        border-radius: 30px;
+        padding: 12px 24px;
+        font-weight: 500;
+        transition: var(--transition);
+        box-shadow: 0 4px 8px rgba(108, 117, 125, 0.2);
+        color: white;
+    }
+
+    .btn-secondary:hover {
+        background: linear-gradient(135deg, #495057, #6c757d);
+        transform: translateY(-2px);
+        box-shadow: 0 6px 12px rgba(108, 117, 125, 0.3);
+    }
+
+    .btn-danger {
+        background-color: #dc3545;
+        border-color: #dc3545;
+        color: white;
+    }
+
+    .btn-danger:hover {
+        background-color: #c82333;
+        border-color: #bd2130;
+    }
+
+    .btn-sm {
+        padding: 0.25rem 0.5rem;
+        font-size: 0.875rem;
+        border-radius: 0.2rem;
+    }
+
+    .ml-3 {
+        margin-left: 1rem;
+    }
+
+    .btn-outline-primary {
+        color: var(--primary);
+        border-color: var(--primary);
+        background-color: transparent;
+        padding: 8px 16px;
+        border-radius: 4px;
+        border: 1px solid var(--primary);
+        transition: all 0.3s ease;
+    }
+
+    .btn-outline-primary:hover {
+        background-color: var(--primary);
+        border-color: var(--primary);
+        color: white;
+    }
+
+    .alert-danger {
+        color: #721c24;
+        background-color: #f8d7da;
+        border-color: #f5c6cb;
+        padding: 0.75rem 1.25rem;
+        margin-bottom: 1rem;
+        border: 1px solid transparent;
+        border-radius: 0.25rem;
+    }
+
+    .alert-success {
+        background-color: #d4edda;
+        color: #155724;
+        border-left: 4px solid #28a745;
+    }
+
+    #edit-section .card {
+        border-left: 4px solid var(--primary);
+    }
+
+    .form-label {
+        font-weight: 500;
+        color: #495057;
+        margin-bottom: 8px;
+    }
+
+    .field-row {
+        background-color: white;
+        padding: 15px;
+        border-radius: 5px;
+        border: 1px solid #e0e0e0;
+        margin-bottom: 10px;
+    }
+
+    .field-row:hover {
+        border-color: var(--primary);
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+
+    .row {
+        display: flex;
+        flex-wrap: wrap;
+        margin-right: -15px;
+        margin-left: -15px;
+    }
+
+    .col-md-4, .col-md-6, .col-md-2 {
+        position: relative;
+        width: 100%;
+        padding-right: 15px;
+        padding-left: 15px;
+    }
+
+    .col-md-2 {
+        flex: 0 0 16.666667%;
+        max-width: 16.666667%;
+    }
+
+    .col-md-4 {
+        flex: 0 0 33.333333%;
+        max-width: 33.333333%;
+    }
+
+    .col-md-6 {
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
+
+    .d-flex {
+        display: flex;
+    }
+
+    .align-items-end {
+        align-items: flex-end;
+    }
+
+    .text-center {
+        text-align: center;
+    }
+
+    .mb-3 {
+        margin-bottom: 1rem;
+    }
+
+    .mb-4 {
+        margin-bottom: 1.5rem;
+    }
+
+    .mt-4 {
+        margin-top: 1.5rem;
+    }
+
+    .btn-lg {
+        padding: 0.5rem 1rem;
+        font-size: 1.25rem;
+        border-radius: 0.3rem;
+    }
+
+    @media (max-width: 768px) {
+        .col-md-2, .col-md-4, .col-md-6 {
+            flex: 0 0 100%;
+            max-width: 100%;
+            margin-bottom: 10px;
+        }
+        
+        .field-row .row {
+            flex-direction: column;
+        }
+        
+        .btn-lg {
+            width: 100%;
+            margin-bottom: 10px;
+        }
+        
+        .ml-3 {
+            margin-left: 0;
+        }
+    }
 </style>
 {% endblock %}

templates/results.html

@@ -82,6 +82,7 @@
         box-shadow: 0 2px 10px rgba(0,0,0,0.05);
         border-left: 4px solid #3498db;
         transition: transform 0.3s;
+        cursor: pointer;
     }
     
     .result-item:hover {
@@ -89,14 +90,119 @@
         box-shadow: 0 5px 15px rgba(0,0,0,0.1);
     }
     
-    .result-item p {
+    .result-preview {
-        margin-bottom: 10px;
+        margin-bottom: 15px;
-        line-height: 1.6;
+    }
+    
+    .result-preview .field-item {
+        display: inline-block;
+        margin-right: 20px;
+        margin-bottom: 8px;
+        padding: 5px 10px;
+        background: #f8f9fa;
+        border-radius: 4px;
+        border: 1px solid #e9ecef;
+    }
+    
+    .result-preview .field-label {
+        font-weight: bold;
+        color: #2c3e50;
+        margin-right: 5px;
+    }
+    
+    .result-preview .field-value {
         color: #34495e;
     }
     
-    .result-item strong {
+    .result-details {
+        display: none;
+        border-top: 1px solid #e9ecef;
+        padding-top: 15px;
+        margin-top: 15px;
+    }
+    
+    .result-details.expanded {
+        display: block;
+    }
+    
+    .result-details .field-item {
+        margin-bottom: 10px;
+        padding: 8px 12px;
+        background: #f8f9fa;
+        border-radius: 4px;
+        border-left: 3px solid #3498db;
+    }
+    
+    .result-details .field-label {
+        font-weight: bold;
         color: #2c3e50;
+        display: inline-block;
+        min-width: 120px;
+    }
+    
+    .result-details .field-value {
+        color: #34495e;
+    }
+    
+    .expand-indicator {
+        float: right;
+        color: #3498db;
+        font-size: 14px;
+        transition: all 0.3s;
+    }
+    
+    .result-item.expanded .expand-indicator {
+        color: #2c3e50;
+    }
+    
+    .image-container {
+        margin-top: 15px;
+        text-align: center;
+    }
+    
+    .result-image {
+        max-width: 100%;
+        max-height: 300px;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        cursor: pointer;
+        transition: transform 0.3s;
+    }
+    
+    .result-image:hover {
+        transform: scale(1.05);
+    }
+    
+    .image-modal {
+        display: none;
+        position: fixed;
+        z-index: 1000;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0,0,0,0.8);
+        cursor: pointer;
+    }
+    
+    .image-modal img {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        max-width: 90%;
+        max-height: 90%;
+        border-radius: 8px;
+    }
+    
+    .close-modal {
+        position: absolute;
+        top: 20px;
+        right: 30px;
+        color: white;
+        font-size: 30px;
+        font-weight: bold;
+        cursor: pointer;
     }
     
     /* 加载状态 */
@@ -152,22 +258,47 @@
                     return;
                 }
                 
-                const html = realData.map(item => {
+                const html = realData.map((item, index) => {
                     const source = item._source || {};
-                    const students = Array.isArray(source.students)
+                    const allFields = Object.entries(source).filter(([key, value]) => key !== 'image' && value);
-                        ? source.students.join(', ')
-                        : (source.students || '无');
                     
-                    const teacher = Array.isArray(source.teacher)
+                    // 获取前3个字段作为预览
-                        ? source.teacher.join(', ')
+                    const previewFields = allFields.slice(0, 3);
-                        : (source.teacher || '无');
+                    const hasMoreFields = allFields.length > 3;
+                    
+                    // 生成预览字段HTML
+                    const previewHtml = previewFields.map(([key, value]) => `
+                        <div class="field-item">
+                            <span class="field-label">${key}:</span>
+                            <span class="field-value">${Array.isArray(value) ? value.join(', ') : value}</span>
+                        </div>
+                    `).join('');
+                    
+                    // 生成详细字段HTML
+                    const detailsHtml = allFields.map(([key, value]) => `
+                        <div class="field-item">
+                            <span class="field-label">${key}:</span>
+                            <span class="field-value">${Array.isArray(value) ? value.join(', ') : value}</span>
+                        </div>
+                    `).join('');
+                    
+                    // 图片HTML
+                    const imageHtml = source.image ? `
+                        <div class="image-container">
+                            <img src="/image/${source.image}" alt="相关图片" class="result-image" onclick="openImageModal('/image/${source.image}')">
+                        </div>
+                    ` : '';
                     
                     return `
-                        <div class="result-item">
+                        <div class="result-item" onclick="toggleDetails(${index})" data-index="${index}">
-                            <p><strong>比赛/论文名称：</strong>${source.id || '无'}</p>
+                            <div class="result-preview">
-                            <p><strong>项目名称：</strong>${source.name || '无'}</p>
+                                ${previewHtml}
-                            <p><strong>学生：</strong>${students}</p>
+                                ${hasMoreFields ? '<span class="expand-indicator">▼ 点击查看更多</span>' : ''}
-                            <p><strong>指导老师：</strong>${teacher}</p>
+                            </div>
+                            <div class="result-details" id="details-${index}">
+                                ${detailsHtml}
+                                ${imageHtml}
+                            </div>
                         </div>
                     `;
                 }).join('');
@@ -178,5 +309,54 @@
                 resultsContainer.innerHTML = '<div class="error">搜索过程中发生错误</div>';
             });
     });
+    
+    function toggleDetails(index) {
+        const resultItem = document.querySelector(`[data-index="${index}"]`);
+        const detailsDiv = document.getElementById(`details-${index}`);
+        
+        if (detailsDiv.classList.contains('expanded')) {
+            detailsDiv.classList.remove('expanded');
+            resultItem.classList.remove('expanded');
+        } else {
+            detailsDiv.classList.add('expanded');
+            resultItem.classList.add('expanded');
+        }
+    }
+    
+    function openImageModal(imageSrc) {
+        event.stopPropagation(); // 阻止事件冒泡
+        
+        // 创建模态框
+        const modal = document.createElement('div');
+        modal.className = 'image-modal';
+        modal.innerHTML = `
+            <span class="close-modal" onclick="closeImageModal()">&times;</span>
+            <img src="${imageSrc}" alt="图片预览">
+        `;
+        
+        document.body.appendChild(modal);
+        modal.style.display = 'block';
+        
+        // 点击模态框背景关闭
+        modal.addEventListener('click', function(e) {
+            if (e.target === modal) {
+                closeImageModal();
+            }
+        });
+    }
+    
+    function closeImageModal() {
+        const modal = document.querySelector('.image-modal');
+        if (modal) {
+            modal.remove();
+        }
+    }
+    
+    // ESC键关闭模态框
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+            closeImageModal();
+        }
+    });
 </script>
 {% endblock %}