都有后端了怎么能没前端呢 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文件下载中心</title> <!-- 本地 Bootstrap CSS --> <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet"> <!-- 本地 Bootstrap Icons --> <link href="{{ url_for('static', filename='icons/bootstrap-icons.css') }}" rel="stylesheet"> <style> :root { --primary-color: #0d6efd; --secondary-color: #6c757d; --success-color: #198754; --light-bg: #f8f9fa; --card-shadow: 0 4px 8px rgba(0,0,0,0.05); } body { background-color: var(--light-bg); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } .card { border-radius: 10px; box-shadow: var(--card-shadow); margin-bottom: 20px; border: none; transition: transform 0.2s; } .card:hover { transform: translateY(-2px); } .card-header { background-color: #ffffff; border-bottom: 1px solid #e9ecef; padding: 15px 20px; font-weight: 600; border-radius: 10px 10px 0 0 !important; } .file-type-badge { font-family: 'SF Mono', 'Consolas', 'Monaco', 'Courier New', monospace; background-color: #e9ecef; color: #495057; border-radius: 4px; padding: 4px 8px; font-size: 0.9em; font-weight: 600; letter-spacing: 0.5px; } .filter-section { background-color: #ffffff; border-radius: 10px; padding: 20px; margin-bottom: 25px; box-shadow: 0 2px 4px rgba(0,0,0,0.03); } .upload-container { position: sticky; top: 20px; } .upload-card { height: 100%; } .table-hover tbody tr:hover { background-color: rgba(13, 110, 253, 0.05); } .file-link { font-weight: 500; color: #212529; transition: color 0.2s; } .file-link:hover { color: var(--primary-color); text-decoration: none; } .btn-upload { background-color: var(--success-color); border-color: var(--success-color); font-weight: 500; padding: 10px 16px; font-size: 1.1rem; } .btn-upload:hover { background-color: #157347; border-color: #146c43; } .file-icon { margin-right: 8px; color: var(--secondary-color); } .file-row { display: flex; align-items: center; } .file-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; } .no-files { padding: 40px 20px; text-align: center; color: var(--secondary-color); } .upload-instruction { font-size: 0.9rem; color: var(--secondary-color); } @media (max-width: 992px) { .upload-container { position: static; margin-top: 30px; } .file-name { max-width: 200px; } } @media (max-width: 768px) { .file-name { max-width: 150px; } } </style> </head> <body> <div class="container-fluid py-4"> <div class="row mb-4"> <div class="col-12 text-center"> <h1 class="mb-0">文件下载中心</h1> </div> </div> <!-- 搜索和筛选区域 --> <div class="filter-section"> <form id="searchForm" onsubmit="performSearch(event)"> <div class="row g-3 align-items-end"> <!-- 文件名搜索 --> <div class="col-md-5"> <label for="searchQuery" class="form-label fw-medium">文件名搜索:</label> <input type="text" class="form-control" id="searchQuery" placeholder="输入文件名关键字..." value="{{ query }}"> </div> <!-- 文件类型筛选 --> <div class="col-md-4"> <label for="extensionFilter" class="form-label fw-medium">文件类型:</label> <select class="form-select" id="extensionFilter"> <option value="all" {% if selected_ext == 'all' %}selected{% endif %}>所有类型</option> {% for ext in extensions %} <option value="{{ ext }}" {% if selected_ext == ext %}selected{% endif %}>{{ ext | upper }}</option> {% endfor %} </select> </div> <!-- 操作按钮 --> <div class="col-md-3"> <button type="submit" class="btn btn-primary w-100 fw-medium">搜索</button> <button type="button" class="btn btn-outline-secondary w-100 mt-2" onclick="resetSearch()">重置</button> </div> </div> </form> </div> <div class="row"> <!-- 左侧文件列表 (占70%) --> <div class="col-lg-8"> <div class="card"> <div class="card-header d-flex justify-content-between align-items-center"> <h5 class="mb-0">文件列表</h5> <span class="badge bg-primary rounded-pill">{{ files | length }} 个文件</span> </div> <div class="card-body p-0"> {% if files %} <div class="table-responsive"> <table class="table table-hover mb-0"> <thead class="table-light"> <tr> <th scope="col" style="width: 60%">文件名</th> <th scope="col">类型</th> <th scope="col" class="text-end">操作</th> </tr> </thead> <tbody> {% for file in files %} <tr> <td> <div class="file-row"> <i class="bi bi-file-earmark file-icon"></i> <span class="file-link file-name" title="{{ file.name }}{% if file.ext %}.{{ file.ext }}{% endif %}"> {{ file.name }}{% if file.ext %}.{{ file.ext }}{% endif %} </span> </div> </td> <td> {% if file.ext %} <span class="file-type-badge">{{ file.ext | upper }}</span> {% else %} <span class="text-muted">-</span> {% endif %} </td> <td class="text-end"> <a href="{{ url_for('download_file', filename=file.fullname) }}" class="btn btn-sm btn-outline-primary px-3">下载</a> </td> </tr> {% endfor %} </tbody> </table> </div> {% else %} <div class="no-files"> <i class="bi bi-folder-x" style="font-size: 3rem; margin-bottom: 15px;"></i> <h4 class="text-muted">没有找到匹配的文件</h4> <p class="text-muted">尝试更改搜索条件或上传新文件</p> </div> {% endif %} </div> </div> </div> <!-- 右侧上传表单 (占30%) --> <div class="col-lg-4"> <div class="upload-container"> <div class="card upload-card"> <div class="card-header"> <h5 class="mb-0">上传文件</h5> </div> <div class="card-body"> <form id="uploadForm" enctype="multipart/form-data"> <div class="mb-4"> <label for="fileInput" class="form-label fw-medium mb-2">选择文件</label> <input class="form-control" type="file" name="file" id="fileInput"> <div class="upload-instruction mt-2"> 支持所有类型的文件上传，最大文件大小：10MB </div> </div> <div class="d-grid"> <button type="submit" class="btn btn-upload fw-medium"> <i class="bi bi-cloud-upload me-2"></i>上传文件 </button> </div> </form> <!-- 上传提示 --> <div class="mt-4 pt-3 border-top"> <h6 class="fw-medium mb-3">上传说明：</h6> <ul class="list-unstyled"> <li class="mb-2"> <i class="bi bi-check-circle me-2 text-success"></i> <span class="upload-instruction">文件名将自动清理特殊字符</span> </li> <li class="mb-2"> <i class="bi bi-check-circle me-2 text-success"></i> <span class="upload-instruction">上传后文件将立即出现在列表中</span> </li> <li> <i class="bi bi-check-circle me-2 text-success"></i> <span class="upload-instruction">支持批量上传多个文件</span> </li> </ul> </div> </div> </div> </div> </div> </div> </div> <!-- 本地 Bootstrap Bundle JS --> <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script> <script> // 搜索功能 function performSearch(event) { event.preventDefault(); const query = document.getElementById('searchQuery').value; const extension = document.getElementById('extensionFilter').value; // 构建查询参数 let params = new URLSearchParams(); if (query) params.append('q', query); if (extension !== 'all') params.append('ext', extension); window.location.href = "{{ url_for('search_files') }}?" + params.toString(); } // 重置搜索 function resetSearch() { document.getElementById('searchQuery').value = ''; document.getElementById('extensionFilter').value = 'all'; performSearch(new Event('submit')); } // 上传功能 document.getElementById('uploadForm').addEventListener('submit', async function(event) { event.preventDefault(); const fileInput = document.getElementById('fileInput'); const submitBtn = event.submitter; const originalBtnHTML = submitBtn.innerHTML; if (!fileInput.files[0]) { alert("请先选择要上传的文件！"); return false; } // 检查文件大小（10MB限制） const maxSize = 10 * 1024 * 1024; // 10MB if (fileInput.files[0].size > maxSize) { alert("文件大小超过10MB限制！"); return false; } try { // 显示上传提示 submitBtn.disabled = true; submitBtn.innerHTML = ` <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 上传中... `; const formData = new FormData(this); const response = await fetch("{{ url_for('upload_file') }}", { method: 'POST', body: formData }); if (response.ok) { const result = await response.text(); // 保留当前搜索状态 const query = document.getElementById('searchQuery').value; const extension = document.getElementById('extensionFilter').value; let params = new URLSearchParams(); if (query) params.append('q', query); if (extension !== 'all') params.append('ext', extension); // 显示成功提示 submitBtn.innerHTML = `<i class="bi bi-check-circle me-2"></i>上传成功`; submitBtn.classList.remove('btn-upload'); submitBtn.classList.add('btn-success'); // 3秒后刷新页面 setTimeout(() => { window.location.href = "{{ url_for('search_files') }}?" + params.toString(); }, 1500); } else { const errorText = await response.text(); throw new Error(errorText || '上传失败'); } } catch (error) { alert('上传出错: ' + error.message); submitBtn.disabled = false; submitBtn.innerHTML = originalBtnHTML; submitBtn.classList.add('btn-upload'); submitBtn.classList.remove('btn-success'); } }); </script> </body> </html>