From 81f1eae2d5be4e575e8db2da8916b1ea281d5d24 Mon Sep 17 00:00:00 2001
From: Viajero <2737079298@qq.com>
Date: Tue, 14 Oct 2025 15:01:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E2=80=9C=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E2=80=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.py             |  23 ++++
 templates/all.html | 307 +++++++++++++++++++++++++++++++++++----------
 2 files changed, 264 insertions(+), 66 deletions(-)

diff --git a/app.py b/app.py
index 23ce270..19fd0d6 100644
--- a/app.py
+++ b/app.py
@@ -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
+
 
 
 # 提供图片访问的路由
diff --git a/templates/all.html b/templates/all.html
index 06a4d28..514e9b5 100644
--- a/templates/all.html
+++ b/templates/all.html
@@ -27,50 +27,87 @@
         margin-bottom: 15px;
     }
 
-    /* 表格容器 - 顶部边距调整 */
-    .table-container {
-        overflow-x: auto;
-        margin-top: 15px; /* 减少顶部间距 */
+    /* 卡片容器样式 */
+    .data-cards {
+        display: grid;
+        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;
     }
 
-    /* 表格样式 */
-    table {
-        width: 100%;
-        border-collapse: collapse;
-        font-family: 'Segoe UI', Arial, sans-serif;
+    .data-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
     }
 
-    /* 表头样式 */
-    thead {
-        background: linear-gradient(135deg, #3498db, #1a5276);
-        color: white;
+    /* 卡片头部样式 */
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 15px;
+        padding-bottom: 15px;
+        border-bottom: 1px solid #f0f0f0;
     }
 
-    th {
-        padding: 16px 12px;
-        text-align: left;
+    .card-header h3 {
+        margin: 0;
+        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;
     }
 
-    /* 表格行样式 */
-    tbody tr {
-        border-bottom: 1px solid #eef1f5;
-        transition: background-color 0.3s;
+    .field-value {
+        color: #666;
+        flex: 1;
+        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 {
-        background-color: #e3f2fd;
-    }
-
-    td {
-        padding: 14px 12px;
-        color: #4a5568;
+    .card-image img {
+        max-width: 100%;
+        max-height: 200px;
+        border-radius: 4px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     }
 
     /* 操作按钮样式 */
@@ -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>
-            <thead>
-                <tr>
-                    <th>比赛/论文名称</th>
-                    <th>项目名称</th>
-                    <th>学生</th>
-                    <th>指导老师</th>
-                    <th style="text-align: center;">操作</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% if data %}
-                    {% for item in data %}
-                        <tr>
-                            <td>{{ item.id or '无' }}</td>
-                            <td>{{ item.name or '无' }}</td>
-                            <td>{% if item.students is string %}{{ item.students or '无' }}{% else %}{{ item.students|join(', ') if item.students else '无' }}{% endif %}</td>
-                            <td>{% if item.teacher is string %}{{ item.teacher or '无' }}{% else %}{{ item.teacher|join(', ') if item.teacher else '无' }}{% endif %}</td>
-                            <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>
-                        </tr>
-                    {% endfor %}
-                {% else %}
-                    <tr>
-                        <td colspan="5" class="no-data">暂无数据</td>
-                    </tr>
-                {% endif %}
-            </tbody>
-        </table>
+    <!-- 批量操作区域 -->
+    <div class="batch-operations" style="margin-bottom: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 8px; border: 1px solid #e0e0e0;">
+        <div style="display: flex; align-items: center; gap: 15px;">
+            <div style="display: flex; align-items: center; gap: 8px;">
+                <input type="checkbox" id="select-all" onchange="toggleSelectAll(this.checked)">
+                <label for="select-all" style="font-weight: 600; color: #333;">全选</label>
+            </div>
+            <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;">
+                批量删除选中项
+            </button>
+            <span id="selected-count" style="color: #666; font-size: 14px;">已选择 0 项</span>
+        </div>
+    </div>
+
+    <div class="data-cards">
+        {% if data %}
+            {% for item in data %}
+                <div class="data-card">
+                    <div class="card-header">
+                        <div style="display: flex; align-items: center; gap: 15px;">
+                            <input type="checkbox" class="doc-checkbox" value="{{ item._id }}" onchange="updateSelectedCount()">
+                            <h3>记录 {{ loop.index }}</h3>
+                        </div>
+                        <div class="card-actions">
+                            <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 %}
+                            {# 如果没有data字段，显示解析后的字段 #}
+                            {% for key, value in item.items() %}
+                                {% 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 %}
     </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 %}
\ No newline at end of file