<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件共享 - {{ current_dir }}</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
background: #0a0a0a;
min-height: 100vh;
padding: 16px;
color: #e0e0e0;
line-height: 1.4;
}
.container {
max-width: 1400px;
margin: 0 auto;
background: #1a1a1a;
border: 1px solid #333;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.header {
background: #2a2a2a;
color: #00ff88;
padding: 20px 24px;
border-bottom: 1px solid #333;
}
.header h1 {
font-size: 1.5rem;
margin-bottom: 4px;
font-weight: 600;
letter-spacing: -0.5px;
}
.header p {
font-size: 0.85rem;
color: #888;
margin: 0;
}
.upload-section {
padding: 20px 24px;
background: #1a1a1a;
border-bottom: 1px solid #333;
}
.upload-form {
background: #2a2a2a;
padding: 16px;
border-radius: 4px;
border: 1px dashed #444;
transition: all 0.2s ease;
position: relative;
}
.upload-form:hover {
border-color: #00ff88;
background: #2d2d2d;
}
.upload-form.drag-over {
border-color: #00ff88;
background: #2d2d2d;
border-style: solid;
}
.file-input-wrapper {
position: relative;
display: inline-block;
width: 100%;
margin-bottom: 20px;
}
.file-input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.file-input-label {
display: block;
padding: 12px 16px;
background: #333;
color: #e0e0e0;
border-radius: 4px;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
font-weight: 500;
font-size: 0.9rem;
border: 1px solid #444;
}
.file-input-label:hover {
background: #3a3a3a;
border-color: #00ff88;
color: #00ff88;
}
.file-input-label.uploading {
background: #2a2a2a;
color: #666;
cursor: not-allowed;
border-color: #333;
}
.files-section {
padding: 20px 24px;
background: #1a1a1a;
}
.files-header {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.files-header h2 {
font-size: 1.1rem;
color: #e0e0e0;
margin-right: 12px;
font-weight: 600;
}
.file-count {
background: #333;
color: #00ff88;
padding: 2px 8px;
border-radius: 3px;
font-size: 0.75rem;
font-weight: 500;
border: 1px solid #444;
}
.file-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
list-style: none;
padding: 0;
}
.file-card {
background: #2a2a2a;
border: 1px solid #333;
border-radius: 4px;
transition: all 0.2s ease;
overflow: hidden;
position: relative;
}
.file-card:hover {
border-color: #00ff88;
background: #2d2d2d;
transform: translateY(-1px);
}
.file-link {
display: block;
text-decoration: none;
color: #e0e0e0;
height: 100%;
}
.file-preview {
height: 120px;
background: #1a1a1a;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
border-bottom: 1px solid #333;
}
.file-preview img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
border-radius: 2px;
}
.file-preview .file-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
font-size: 1.2rem;
}
.file-icon.folder {
background: #333;
color: #00ff88;
border: 1px solid #444;
}
.file-icon.file {
background: #333;
color: #0088ff;
border: 1px solid #444;
}
.file-icon.image {
background: #333;
color: #ff8800;
border: 1px solid #444;
}
.file-info {
padding: 12px;
}
.file-name {
font-size: 0.85rem;
font-weight: 500;
margin-bottom: 4px;
word-break: break-word;
line-height: 1.3;
color: #e0e0e0;
}
.file-type {
font-size: 0.7rem;
color: #888;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.file-extension {
display: inline-block;
background: #333;
color: #888;
padding: 1px 6px;
border-radius: 2px;
font-size: 0.65rem;
margin-left: 6px;
border: 1px solid #444;
}
.back-link {
display: inline-flex;
align-items: center;
background: #333;
color: #00ff88;
padding: 6px 12px;
border-radius: 3px;
text-decoration: none;
font-weight: 500;
margin-bottom: 12px;
transition: all 0.2s ease;
font-size: 0.8rem;
border: 1px solid #444;
}
.back-link:hover {
background: #3a3a3a;
border-color: #00ff88;
}
.back-link::before {
content: "←";
margin-right: 6px;
font-size: 0.9rem;
}
.empty-state {
text-align: center;
padding: 40px 20px;
color: #666;
}
.empty-state-icon {
font-size: 2rem;
margin-bottom: 12px;
opacity: 0.5;
}
.empty-state h3 {
font-size: 1rem;
margin-bottom: 8px;
color: #888;
}
.empty-state p {
font-size: 0.85rem;
line-height: 1.4;
}
@media (min-width: 1200px) {
.file-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
}
.file-preview {
height: 100px;
}
.file-preview .file-icon {
width: 28px;
height: 28px;
font-size: 1rem;
}
.file-info {
padding: 10px;
}
.file-name {
font-size: 0.8rem;
}
}
@media (min-width: 1600px) {
.file-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
}
.file-preview {
height: 90px;
}
.file-preview .file-icon {
width: 24px;
height: 24px;
font-size: 0.9rem;
}
.file-info {
padding: 8px;
}
.file-name {
font-size: 0.75rem;
}
}
@media (max-width: 768px) {
body {
padding: 8px;
}
.header h1 {
font-size: 1.3rem;
}
.header p {
font-size: 0.8rem;
}
.upload-section,
.files-section {
padding: 16px;
}
.file-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
}
.file-preview {
height: 100px;
}
.file-preview .file-icon {
width: 28px;
height: 28px;
font-size: 1rem;
}
.file-info {
padding: 10px;
}
.file-name {
font-size: 0.8rem;
}
}
@media (max-width: 600px) {
.file-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.file-preview {
height: 80px;
}
.file-preview .file-icon {
width: 24px;
height: 24px;
font-size: 0.9rem;
}
.file-info {
padding: 8px;
}
}
@media (max-width: 480px) {
.header {
padding: 16px;
}
.header h1 {
font-size: 1.2rem;
}
.upload-form {
padding: 12px;
}
.file-grid {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.file-preview {
height: 70px;
}
.file-preview .file-icon {
width: 20px;
height: 20px;
font-size: 0.8rem;
}
.file-info {
padding: 6px;
}
.file-name {
font-size: 0.75rem;
line-height: 1.2;
}
.file-type {
font-size: 0.65rem;
}
.file-extension {
font-size: 0.6rem;
padding: 1px 4px;
}
}
.loading {
display: none;
text-align: center;
padding: 20px;
}
.spinner {
border: 3px solid #f3f3f3;
border-top: 3px solid #4facfe;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin: 0 auto 10px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📁 文件共享</h1>
<p>局域网文件传输工具</p>
</div>
<div class="upload-section">
<form class="upload-form" id="uploadForm" action="/?path={{ current_path }}" method="post" enctype="multipart/form-data">
<div class="file-input-wrapper">
<input type="file" name="axum_rs_file" class="file-input" id="fileInput" required>
<label for="fileInput" class="file-input-label" id="fileInputLabel">
📤 点击选择文件或拖拽文件到此处
</label>
</div>
</form>
<div class="loading" id="loading">
<div class="spinner"></div>
<p>正在上传文件...</p>
</div>
</div>
<div class="files-section">
<div class="files-header">
<h2>📂 当前目录</h2>
<span class="file-count">{{ items|length }} 项</span>
</div>
{% if current_path != "" %}
<a href="/?path={{ parent_path }}" class="back-link">返回上级目录</a>
{% endif %}
{% if items %}
<ul class="file-grid">
{% for item in items %}
<li class="file-card">
<a href="{{ item.url }}" class="file-link" {% if item.is_file %}target="_blank"{% endif %}>
<div class="file-preview">
{% if item.is_image %}
<img src="{{ item.url }}" alt="{{ item.name }}" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<div class="file-icon image" style="display: none;">
🖼️
</div>
{% else %}
<div class="file-icon {{ item.file_type }}">
{% if item.is_dir %}
📁
{% else %}
📄
{% endif %}
</div>
{% endif %}
</div>
<div class="file-info">
<div class="file-name">{{ item.name }}</div>
<div class="file-type">
{% if item.is_dir %}
文件夹
{% elif item.is_image %}
图片
{% else %}
文件
{% endif %}
{% if item.file_extension %}
<span class="file-extension">{{ item.file_extension }}</span>
{% endif %}
</div>
</div>
</a>
</li>
{% endfor %}
</ul>
{% else %}
<div class="empty-state">
<div class="empty-state-icon">📂</div>
<h3>目录为空</h3>
<p>当前目录没有任何文件或文件夹<br>您可以使用上方的上传功能添加文件</p>
</div>
{% endif %}
</div>
</div>
<script>
function showLoading() {
document.getElementById('loading').style.display = 'block';
document.querySelector('.upload-form').style.display = 'none';
}
function hideLoading() {
document.getElementById('loading').style.display = 'none';
document.querySelector('.upload-form').style.display = 'block';
}
function uploadFile() {
const form = document.getElementById('uploadForm');
const fileInput = document.getElementById('fileInput');
const label = document.getElementById('fileInputLabel');
if (fileInput.files.length > 0) {
showLoading();
label.classList.add('uploading');
label.textContent = '⏳ 正在上传...';
form.submit();
}
}
document.getElementById('fileInput').addEventListener('change', function(e) {
if (e.target.files.length > 0) {
uploadFile();
}
});
const uploadForm = document.querySelector('.upload-form');
const fileInput = document.getElementById('fileInput');
const label = document.getElementById('fileInputLabel');
uploadForm.addEventListener('dragover', function(e) {
e.preventDefault();
uploadForm.classList.add('drag-over');
});
uploadForm.addEventListener('dragleave', function(e) {
e.preventDefault();
uploadForm.classList.remove('drag-over');
});
uploadForm.addEventListener('drop', function(e) {
e.preventDefault();
uploadForm.classList.remove('drag-over');
const files = e.dataTransfer.files;
if (files.length > 0) {
fileInput.files = files;
uploadFile();
}
});
document.addEventListener('dragover', function(e) {
e.preventDefault();
});
document.addEventListener('drop', function(e) {
e.preventDefault();
});
</script>
</body>
</html>