文件浏览功能

admin/dashboard/templates/file_browser.html

@@ -0,0 +1,143 @@
+{% 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 %}