diff --git a/app.py b/app.py index 23ce270..0510ee9 100644 --- a/app.py +++ b/app.py @@ -281,10 +281,10 @@ def show_all(): def edit_entry(doc_id): """ 渲染编辑页面 - + 参数: doc_id (str): 要编辑的文档ID - + 返回: str: 渲染后的编辑页面或错误信息 """ @@ -292,7 +292,7 @@ def edit_entry(doc_id): document = get_by_id(doc_id) if not document: return "文档不存在", 404 - + # 保持原始数据格式，不进行JSON转换 # 直接传递包含data字段的原始文档 return render_template('edit.html', document=document) @@ -302,10 +302,10 @@ def edit_entry(doc_id): def update_entry(doc_id): """ 处理数据更新请求 - + 参数: doc_id (str): 要更新的文档ID - + 返回: 重定向到所有数据页面或错误信息 """ @@ -313,40 +313,40 @@ def update_entry(doc_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')) @@ -377,21 +377,21 @@ def delete_entry(doc_id): 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) diff --git a/templates/index.html b/templates/index.html index 96c90ba..c44fe09 100644 --- a/templates/index.html +++ b/templates/index.html @@ -20,72 +20,255 @@ -
+ + {% endblock %} \ No newline at end of file diff --git a/templates/results.html b/templates/results.html index e895619..9c81631 100644 --- a/templates/results.html +++ b/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 { - margin-bottom: 10px; - line-height: 1.6; + .result-preview { + margin-bottom: 15px; + } + + .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) - ? source.students.join(', ') - : (source.students || '无'); + const allFields = Object.entries(source).filter(([key, value]) => key !== 'image' && value); - const teacher = Array.isArray(source.teacher) - ? source.teacher.join(', ') - : (source.teacher || '无'); + // 获取前3个字段作为预览 + const previewFields = allFields.slice(0, 3); + const hasMoreFields = allFields.length > 3; + + // 生成预览字段HTML + const previewHtml = previewFields.map(([key, value]) => ` +
+ ${key}: + ${Array.isArray(value) ? value.join(', ') : value} +
+ `).join(''); + + // 生成详细字段HTML + const detailsHtml = allFields.map(([key, value]) => ` +
+ ${key}: + ${Array.isArray(value) ? value.join(', ') : value} +
+ `).join(''); + + // 图片HTML + const imageHtml = source.image ? ` +
+ 相关图片 +
+ ` : ''; return ` -
-

比赛/论文名称：${source.id || '无'}

-

项目名称：${source.name || '无'}

-

学生：${students}

-

指导老师：${teacher}

+
+
+ ${previewHtml} + ${hasMoreFields ? '▼ 点击查看更多' : ''} +
+
+ ${detailsHtml} + ${imageHtml} +
`; }).join(''); @@ -178,5 +309,54 @@ resultsContainer.innerHTML = '
搜索过程中发生错误
'; }); }); + + 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 = ` + × + 图片预览 + `; + + 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(); + } + }); {% endblock %}