新增“数据编辑”

# Conflicts:
#	app.py

ESConnect.py

@@ -40,6 +40,9 @@ def create_index_with_mapping():
     else:
         print(f"索引 {index_name} 已存在")
 
+def update_document(es, index_name, doc_id=None, updated_doc=None):
+    """更新指定ID的文档"""
+    es.update(index=index_name, id=doc_id, body={"doc": updated_doc})
 
 
 def get_doc_id(data):
@@ -122,6 +125,49 @@ def delete_by_id(doc_id):
         print("删除失败:", str(e))
         return False
 
+def update_by_id(doc_id, updated_data):
+    """
+    根据文档ID更新数据
+    
+    参数:
+        doc_id (str): 要更新的文档ID
+        updated_data (dict): 更新的数据内容
+        
+    返回:
+        bool: 更新成功返回True，失败返回False
+    """
+    try:
+        # 执行更新操作
+        es.update(index=index_name, id=doc_id, body={"doc": updated_data})
+        print(f"文档 {doc_id} 更新成功")
+        return True
+    except Exception as e:
+        print(f"更新失败: {str(e)}")
+        return False
+
+def get_by_id(doc_id):
+    """
+    根据文档ID获取单个文档
+    
+    参数:
+        doc_id (str): 要获取的文档ID
+        
+    返回:
+        dict or None: 成功返回文档数据，失败返回None
+    """
+    try:
+        # 执行获取操作
+        result = es.get(index=index_name, id=doc_id)
+        if result['found']:
+            return {
+                "_id": result['_id'],
+                **result['_source']
+            }
+        return None
+    except Exception as e:
+        print(f"获取文档失败: {str(e)}")
+        return None
+
 def search_by_any_field(keyword):
     """全字段模糊搜索（支持拼写错误）"""
     try:

app.py

@@ -153,10 +153,10 @@ def index():
 @app.route('/upload', methods=['POST'])
 def upload_image():
     """
-    处理图片上传请求，调用OCR识别但不存储结果
+    处理图片上传请求，调用OCR识别并存储结果
     
     返回:
-        JSON: 识别结果，供用户编辑确认
+        JSON: 上传成功或失败的响应
     """
     # 获取上传的文件
     file = request.files.get('file')
@@ -173,13 +173,20 @@ def upload_image():
         print(f"开始处理图片: {image_path}")
         original_data = ocr_and_extract_info(image_path)  # 获取原始JSON数据
         if original_data:
-            print(f"识别成功: {original_data}")
-            # 返回识别结果和图片文件名，供用户编辑确认
-            return jsonify({
-                "message": "识别成功，请确认数据后点击录入", 
-                "data": original_data, 
-                "image": filename
-            })
+            # 使用json_converter将JSON数据转换为字符串
+            data_string = json_to_string(original_data)
+            print(f"转换后的数据字符串: {data_string}")
+            
+            # 构造新的数据结构，只包含data和image字段
+            processed_data = {
+                "data": data_string,
+                "image": filename  # 存储图片文件名
+            }
+            print(f"准备存储的数据: {processed_data}")
+            
+            insert_data(processed_data)  # 存入ES
+            print("✓ 数据成功存储到Elasticsearch")
+            return jsonify({"message": "成功录入", "data": original_data, "processed": processed_data})
         else:
             print("✗ 无法识别图片内容")
             return jsonify({"error": "无法识别图片内容"}), 400
@@ -187,49 +194,6 @@ def upload_image():
         print(f"✗ 处理过程中发生错误: {str(e)}")
         return jsonify({"error": str(e)}), 500
 
-# 确认录入路由
-@app.route('/confirm', methods=['POST'])
-def confirm_data():
-    """
-    确认并录入用户编辑后的数据
-    
-    返回:
-        JSON: 录入成功或失败的响应
-    """
-    try:
-        # 获取前端提交的数据
-        request_data = request.get_json()
-        if not request_data:
-            return jsonify({"error": "没有接收到数据"}), 400
-        
-        # 获取编辑后的数据和图片文件名
-        edited_data = request_data.get('data', {})
-        image_filename = request_data.get('image', '')
-        
-        if not edited_data:
-            return jsonify({"error": "数据不能为空"}), 400
-        
-        # 使用json_converter将JSON数据转换为字符串
-        data_string = json_to_string(edited_data)
-        print(f"转换后的数据字符串: {data_string}")
-        
-        # 构造新的数据结构，只包含data和image字段
-        processed_data = {
-            "data": data_string,
-            "image": image_filename  # 存储图片文件名
-        }
-        print(f"准备存储的数据: {processed_data}")
-        
-        # 存入ES
-        insert_data(processed_data)
-        print("✓ 数据成功存储到Elasticsearch")
-        
-        return jsonify({"message": "数据录入成功", "data": edited_data})
-        
-    except Exception as e:
-        print(f"✗ 录入过程中发生错误: {str(e)}")
-        return jsonify({"error": str(e)}), 500
-
 # 搜索路由
 @app.route('/search')
 def search():
@@ -312,20 +276,82 @@ def show_all():
     
     return render_template('all.html', data=processed_data)
 
-# 添加图片路由
-@app.route('/image/<filename>')
-def serve_image(filename):
+# 编辑数据页面路由
+@app.route('/edit/<doc_id>')
+def edit_entry(doc_id):
     """
-    提供图片文件服务
+    渲染编辑页面
     
     参数:
-        filename (str): 图片文件名
+        doc_id (str): 要编辑的文档ID
         
     返回:
-        Response: 图片文件响应
+        str: 渲染后的编辑页面或错误信息
     """
-    from flask import send_from_directory
-    return send_from_directory('image', filename)
+    # 获取要编辑的文档数据
+    document = get_by_id(doc_id)
+    if not document:
+        return "文档不存在", 404
+    
+    # 保持原始数据格式，不进行JSON转换
+    # 直接传递包含data字段的原始文档
+    return render_template('edited.html', document=document)
+
+# 更新数据路由
+@app.route('/update/<doc_id>', methods=['POST'])
+def update_entry(doc_id):
+    """
+    处理数据更新请求
+    
+    参数:
+        doc_id (str): 要更新的文档ID
+        
+    返回:
+        重定向到所有数据页面或错误信息
+    """
+    # 获取原文档的图片信息
+    original_doc = get_by_id(doc_id)
+    if not original_doc:
+        return "文档不存在", 404
+    
+    # 从表单中获取所有字段数据
+    data_parts = []
+    i = 1
+    while True:
+        key_name = request.form.get(f'key_{i}')
+        field_value = request.form.get(f'field_{i}')
+        
+        if not key_name or not field_value:
+            break
+        
+        # 处理字段值（如果是列表格式，用|##|分隔）
+        if ',' in field_value:
+            # 如果是逗号分隔的值，转换为列表格式
+            items = [item.strip() for item in field_value.split(',') if item.strip()]
+            if len(items) > 1:
+                field_value = f"[{'|##|'.join(items)}]"
+        
+        data_parts.append(f"{key_name}:{field_value}")
+        i += 1
+    
+    # 验证是否有数据
+    if not data_parts:
+        return "没有可更新的数据", 400
+    
+    # 构建新的数据字符串
+    data_value = "|###|".join(data_parts)
+    
+    # 构造更新数据
+    updated_data = {
+        'data': data_value,
+        'image': original_doc.get('image', '')  # 保持原图片
+    }
+    
+    # 更新文档
+    if update_by_id(doc_id, updated_data):
+        return redirect(url_for('show_all'))
+    else:
+        return "更新失败", 500
 
 # 删除数据路由
 @app.route('/delete/<doc_id>', methods=['POST'])
@@ -344,8 +370,54 @@ 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
 
 
+
+# 提供图片访问的路由
+@app.route('/image/<filename>')
+def serve_image(filename):
+    """
+    提供image目录下图片的访问服务
+    
+    参数:
+        filename (str): 图片文件名
+        
+    返回:
+        图片文件或404错误
+    """
+    import os
+    from flask import send_from_directory
+    
+    # 确保文件存在
+    image_dir = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'image')
+    if not os.path.exists(os.path.join(image_dir, filename)):
+        return "图片不存在", 404
+    
+    # 发送图片文件
+    return send_from_directory(image_dir, filename)
+
 # 主程序入口
 if __name__ == '__main__':
     # 创建Elasticsearch索引

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);
     }
 
     /* 操作按钮样式 */
@@ -81,6 +118,17 @@
         cursor: pointer;
         font-weight: 500;
         transition: all 0.3s;
+        margin: 0 2px;
+    }
+
+    .edit-btn {
+        background: linear-gradient(to right, #4CAF50, #45a049);
+        color: white;
+    }
+
+    .edit-btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
     }
 
     .delete-btn {
@@ -117,48 +165,189 @@
         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>
 
 <div class="container">
     <h2>所有已录入的奖项信息</h2>
-    <p>在此页面可以查看所有已录入的成果信息，并进行删除操作</p>
+    <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;">
-                                <form action="{{ url_for('delete_entry', doc_id=item._id) }}" method="POST" onsubmit="return confirm('确定要删除这条记录吗？')">
-                                    <button type="submit" class="action-button delete-btn">删除</button>
-                                </form>
-                            </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 %}

templates/edited.html

@@ -0,0 +1,256 @@
+{% extends "base.html" %}
+
+{% block title %}编辑成果信息 - 紫金·稷下薪火·云枢智海师生成果共创系统{% endblock %}
+
+{% block content %}
+<style>
+    /* 基础样式重置 */
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    /* 容器样式 */
+    .container {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+    }
+
+    /* 标题样式 */
+    h2 {
+        color: #2c3e50;
+        border-bottom: 2px solid #3498db;
+        padding-bottom: 8px;
+        margin-bottom: 20px;
+    }
+
+    /* 表单样式 */
+    .form-container {
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        padding: 30px;
+    }
+
+    .form-group {
+        margin-bottom: 20px;
+    }
+
+    .form-group label {
+        display: block;
+        margin-bottom: 8px;
+        font-weight: 600;
+        color: #2c3e50;
+    }
+
+    .form-group input,
+    .form-group textarea {
+        width: 100%;
+        padding: 12px;
+        border: 2px solid #e1e8ed;
+        border-radius: 6px;
+        font-size: 14px;
+        transition: border-color 0.3s;
+    }
+
+    .form-group input:focus,
+    .form-group textarea:focus {
+        outline: none;
+        border-color: #3498db;
+        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
+    }
+
+    .form-group textarea {
+        resize: vertical;
+        min-height: 80px;
+    }
+
+    .form-hint {
+        font-size: 12px;
+        color: #7f8c8d;
+        margin-top: 5px;
+    }
+
+    /* 按钮样式 */
+    .button-group {
+        display: flex;
+        gap: 15px;
+        margin-top: 30px;
+    }
+
+    .btn {
+        padding: 12px 24px;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s;
+        text-decoration: none;
+        display: inline-block;
+        text-align: center;
+    }
+
+    .btn-primary {
+        background: linear-gradient(to right, #3498db, #2980b9);
+        color: white;
+    }
+
+    .btn-primary:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
+    }
+
+    .btn-secondary {
+        background: linear-gradient(to right, #95a5a6, #7f8c8d);
+        color: white;
+    }
+
+    .btn-secondary:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(149, 165, 166, 0.3);
+    }
+
+    .btn-danger {
+        background: linear-gradient(to right, #e74c3c, #c0392b);
+        color: white;
+    }
+
+    .btn-danger:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
+    }
+
+    /* 图片预览样式 */
+    .image-preview {
+        margin-top: 10px;
+        text-align: center;
+    }
+
+    .image-preview img {
+        max-width: 200px;
+        max-height: 200px;
+        border-radius: 6px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+
+    /* 错误提示样式 */
+    .error-message {
+        color: #e74c3c;
+        font-size: 12px;
+        margin-top: 5px;
+    }
+
+    /* 必填字段标记 */
+    .required {
+        color: #e74c3c;
+    }
+</style>
+
+<div class="container">
+    <h2>编辑成果信息</h2>
+    
+    <div class="form-container">
+        <form action="{{ url_for('update_entry', doc_id=document._id) }}" method="POST" id="editForm">
+            {% if document.data %}
+                {# 从原始数据中解析字段 #}
+                {% set data_string = document.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="form-group">
+                            <label for="field_{{ loop.index }}">{{ field_key }} <span class="required">*</span></label>
+                            <input type="text" id="field_{{ loop.index }}" name="field_{{ loop.index }}" value="{{ field_value }}" required>
+                            <input type="hidden" name="key_{{ loop.index }}" value="{{ field_key }}">
+                        </div>
+                    {% endif %}
+                {% endfor %}
+            {% else %}
+                {# 如果没有data字段，显示提示信息 #}
+                <div class="form-group">
+                    <p style="color: #e74c3c; text-align: center;">该记录没有可编辑的数据</p>
+                </div>
+            {% endif %}
+
+            {% if document.image %}
+            <div class="form-group">
+                <label>原图片预览</label>
+                <div class="image-preview">
+                    <img src="{{ url_for('serve_image', filename=document.image) }}" alt="原图片" onerror="this.style.display='none'">
+                </div>
+                <div class="form-hint">当前关联的图片，编辑时无法修改图片</div>
+            </div>
+            {% endif %}
+
+            <div class="button-group">
+                <button type="submit" class="btn btn-primary">保存修改</button>
+                <a href="{{ url_for('show_all') }}" class="btn btn-secondary">取消返回</a>
+                <button type="button" class="btn btn-danger" onclick="confirmDelete()">删除记录</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<script>
+    // 表单验证
+    document.getElementById('editForm').addEventListener('submit', function(e) {
+        // 检查所有字段是否都有值
+        const inputs = document.querySelectorAll('input[type="text"]');
+        let hasEmptyField = false;
+        
+        inputs.forEach(input => {
+            if (!input.value.trim()) {
+                hasEmptyField = true;
+                input.style.borderColor = '#e74c3c';
+            } else {
+                input.style.borderColor = '#e1e8ed';
+            }
+        });
+        
+        if (hasEmptyField) {
+            e.preventDefault();
+            alert('所有字段都必须填写！');
+            return false;
+        }
+        
+        return true;
+    });
+
+    // 删除确认
+    function confirmDelete() {
+        if (confirm('确定要删除这条记录吗？此操作不可撤销！')) {
+            // 创建删除表单并提交
+            const form = document.createElement('form');
+            form.method = 'POST';
+            form.action = '{{ url_for("delete_entry", doc_id=document._id) }}';
+            document.body.appendChild(form);
+            form.submit();
+        }
+    }
+
+    // 自动格式化逗号分隔的值
+    document.querySelectorAll('input[type="text"]').forEach(input => {
+        input.addEventListener('blur', function(e) {
+            const value = e.target.value.trim();
+            if (value && value.includes(',')) {
+                // 格式化逗号分隔的值
+                const formatted = value
+                    .split(',')
+                    .map(item => item.trim())
+                    .filter(item => item)
+                    .join(', ');
+                e.target.value = formatted;
+            }
+        });
+    });
+</script>
+{% endblock %}