143 lines
5.0 KiB
HTML
143 lines
5.0 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}文件浏览器{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">文件浏览器</h3>
|
|
<div class="card-tools">
|
|
<div class="input-group">
|
|
<input type="text" id="current-path" class="form-control" readonly>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-default" onclick="navigateUp()">
|
|
<i class="fas fa-arrow-up"></i> 上级目录
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>名称</th>
|
|
<th>类型</th>
|
|
<th>大小</th>
|
|
<th>修改时间</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="file-list">
|
|
<!-- 文件列表将通过JavaScript动态加载 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
let currentPath = '';
|
|
|
|
function formatFileSize(bytes) {
|
|
if (bytes === 0) return '0 B';
|
|
const k = 1024;
|
|
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
}
|
|
|
|
function formatDate(timestamp) {
|
|
return new Date(timestamp * 1000).toLocaleString();
|
|
}
|
|
|
|
function loadFiles(path = '') {
|
|
currentPath = path;
|
|
$('#current-path').val(path || '/');
|
|
|
|
$.get('/api/list_files', { path: path })
|
|
.done(function(response) {
|
|
if (response.success) {
|
|
const fileList = $('#file-list');
|
|
fileList.empty();
|
|
|
|
response.data.items.forEach(function(item) {
|
|
const row = $('<tr>');
|
|
|
|
// 名称列
|
|
const nameCell = $('<td>');
|
|
const nameLink = $('<a>')
|
|
.text(item.name)
|
|
.attr('href', '#')
|
|
.css('color', item.is_dir ? '#007bff' : 'inherit');
|
|
|
|
if (item.is_dir) {
|
|
nameLink.click(function(e) {
|
|
e.preventDefault();
|
|
loadFiles(path ? path + '/' + item.name : item.name);
|
|
});
|
|
}
|
|
|
|
nameCell.append(nameLink);
|
|
row.append(nameCell);
|
|
|
|
// 类型列
|
|
row.append($('<td>').text(item.is_dir ? '目录' : '文件'));
|
|
|
|
// 大小列
|
|
row.append($('<td>').text(item.is_dir ? '-' : formatFileSize(item.size)));
|
|
|
|
// 修改时间列
|
|
row.append($('<td>').text(formatDate(item.modified)));
|
|
|
|
// 操作列
|
|
const actionsCell = $('<td>');
|
|
if (!item.is_dir) {
|
|
const downloadBtn = $('<button>')
|
|
.addClass('btn btn-sm btn-primary')
|
|
.text('下载')
|
|
.click(function() {
|
|
window.location.href = '/api/download_file?path=' +
|
|
encodeURIComponent(path ? path + '/' + item.name : item.name);
|
|
});
|
|
actionsCell.append(downloadBtn);
|
|
}
|
|
row.append(actionsCell);
|
|
|
|
fileList.append(row);
|
|
});
|
|
} else {
|
|
alert('加载文件列表失败：' + response.message);
|
|
}
|
|
})
|
|
.fail(function() {
|
|
alert('加载文件列表失败');
|
|
});
|
|
}
|
|
|
|
function navigateUp() {
|
|
if (!currentPath) return;
|
|
|
|
const lastSlashIndex = currentPath.lastIndexOf('/');
|
|
if (lastSlashIndex === -1) {
|
|
loadFiles('');
|
|
} else {
|
|
loadFiles(currentPath.substring(0, lastSlashIndex));
|
|
}
|
|
}
|
|
|
|
// 页面加载完成后加载根目录
|
|
$(document).ready(function() {
|
|
loadFiles('');
|
|
});
|
|
</script>
|
|
{% endblock %} |