Add background upload management feature
- Add BackgroundUploadManager class for managing uploads in background - Create background upload button and panel UI - Implement upload state transfer when modal closes - Add real-time progress tracking for background uploads - Support up to 5 concurrent uploads - Display upload progress with percentage and chunk info - Auto-hide background UI when all uploads complete - Add responsive design for background panel
This commit is contained in:
admin
289
static/app.js
289
static/app.js
@@ -8,6 +8,269 @@
|
||||
let selectedFiles = new Set();
|
||||
let eventSource = null;
|
||||
let uploadDropzone = null;
|
||||
let backgroundManager = null;
|
||||
|
||||
// 后台上传管理器
|
||||
class BackgroundUploadManager {
|
||||
constructor() {
|
||||
this.activeUploads = new Map();
|
||||
this.maxConcurrent = 5;
|
||||
this.dropzoneInstance = null;
|
||||
this.onUpdateCallbacks = [];
|
||||
this.isPanelVisible = false;
|
||||
}
|
||||
|
||||
init() {
|
||||
this.createBackgroundUI();
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
createBackgroundUI() {
|
||||
// 创建后台按钮
|
||||
const backgroundBtn = document.createElement('button');
|
||||
backgroundBtn.className = 'btn btn-info background-btn';
|
||||
backgroundBtn.id = 'btn-background';
|
||||
backgroundBtn.style.display = 'none';
|
||||
backgroundBtn.innerHTML = '📋 后台传输 (<span id="upload-count">0</span>)';
|
||||
|
||||
// 插入到上传按钮后面
|
||||
const uploadBtn = document.getElementById('btn-upload');
|
||||
if (uploadBtn && uploadBtn.parentNode) {
|
||||
uploadBtn.parentNode.insertBefore(backgroundBtn, uploadBtn.nextSibling);
|
||||
}
|
||||
|
||||
// 创建后台面板
|
||||
const panel = document.createElement('div');
|
||||
panel.className = 'background-panel';
|
||||
panel.id = 'background-panel';
|
||||
panel.innerHTML = `
|
||||
<div class="panel-header">
|
||||
<h4>后台传输 (<span id="active-count">0</span>)</h4>
|
||||
<button class="close-btn" id="background-close">×</button>
|
||||
</div>
|
||||
<div class="background-content">
|
||||
<div class="background-list" id="background-list">
|
||||
<div class="empty-state">暂无后台传输任务</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(panel);
|
||||
|
||||
// 存储DOM引用
|
||||
this.btnBackground = backgroundBtn;
|
||||
this.backgroundPanel = panel;
|
||||
this.backgroundList = panel.querySelector('#background-list');
|
||||
this.activeCount = panel.querySelector('#active-count');
|
||||
this.uploadCount = backgroundBtn.querySelector('#upload-count');
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
this.btnBackground.addEventListener('click', () => {
|
||||
this.showPanel();
|
||||
});
|
||||
|
||||
this.backgroundPanel.querySelector('#background-close').addEventListener('click', () => {
|
||||
this.hidePanel();
|
||||
});
|
||||
|
||||
// 点击面板外部关闭
|
||||
this.backgroundPanel.addEventListener('click', (e) => {
|
||||
if (e.target === this.backgroundPanel) {
|
||||
this.hidePanel();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
takeOverUploads(dropzone) {
|
||||
this.dropzoneInstance = dropzone;
|
||||
|
||||
// 分析当前上传状态
|
||||
const uploadingFiles = dropzone.getUploadingFiles();
|
||||
const queuedFiles = dropzone.getQueuedFiles();
|
||||
|
||||
[...uploadingFiles, ...queuedFiles].forEach(file => {
|
||||
this.addUploadTask(file);
|
||||
});
|
||||
|
||||
// 绑定事件监听
|
||||
this.bindDropzoneEvents();
|
||||
}
|
||||
|
||||
bindDropzoneEvents() {
|
||||
if (!this.dropzoneInstance) return;
|
||||
|
||||
const dz = this.dropzoneInstance;
|
||||
|
||||
dz.on('uploadprogress', (file, progress, bytesSent, totalBytesSent, totalBytes) => {
|
||||
let chunkInfo = null;
|
||||
if (file.totalChunks > 1) {
|
||||
const currentChunk = (file.upload && file.upload.chunk) || 0;
|
||||
chunkInfo = `${currentChunk + 1}/${file.totalChunks}`;
|
||||
}
|
||||
this.updateProgress(file._dzFileId, progress, chunkInfo);
|
||||
});
|
||||
|
||||
dz.on('success', (file, response) => {
|
||||
this.completeUpload(file._dzFileId);
|
||||
});
|
||||
|
||||
dz.on('error', (file, message) => {
|
||||
this.failUpload(file._dzFileId);
|
||||
});
|
||||
|
||||
dz.on('complete', (file) => {
|
||||
if (dz.getUploadingFiles().length === 0 && dz.getQueuedFiles().length === 0) {
|
||||
setTimeout(() => {
|
||||
loadFiles(currentPath);
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
dz.on('queuecomplete', () => {
|
||||
setTimeout(() => {
|
||||
loadFiles(currentPath);
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
|
||||
addUploadTask(file) {
|
||||
const task = {
|
||||
id: file._dzFileId,
|
||||
fileName: file.name,
|
||||
totalSize: file.size,
|
||||
progress: file._uploadProgress || 0,
|
||||
status: 'uploading',
|
||||
chunks: null,
|
||||
startTime: Date.now()
|
||||
};
|
||||
|
||||
if (file.totalChunks > 1) {
|
||||
const currentChunk = (file.upload && file.upload.chunk) || 0;
|
||||
task.chunks = `${currentChunk}/${file.totalChunks}`;
|
||||
}
|
||||
|
||||
this.activeUploads.set(task.id, task);
|
||||
this.notifyUIUpdate();
|
||||
}
|
||||
|
||||
updateProgress(fileId, progress, chunkInfo) {
|
||||
const task = this.activeUploads.get(fileId);
|
||||
if (task) {
|
||||
task.progress = progress;
|
||||
task.chunks = chunkInfo;
|
||||
this.notifyUIUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
completeUpload(fileId) {
|
||||
const task = this.activeUploads.get(fileId);
|
||||
if (task) {
|
||||
task.status = 'completed';
|
||||
task.progress = 100;
|
||||
// 延迟删除，让用户看到完成状态
|
||||
setTimeout(() => {
|
||||
this.activeUploads.delete(fileId);
|
||||
this.notifyUIUpdate();
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
failUpload(fileId) {
|
||||
const task = this.activeUploads.get(fileId);
|
||||
if (task) {
|
||||
task.status = 'failed';
|
||||
this.notifyUIUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
hasActiveUploads() {
|
||||
return this.activeUploads.size > 0;
|
||||
}
|
||||
|
||||
showPanel() {
|
||||
this.backgroundPanel.style.display = 'block';
|
||||
this.isPanelVisible = true;
|
||||
this.updateUI();
|
||||
}
|
||||
|
||||
hidePanel() {
|
||||
this.backgroundPanel.style.display = 'none';
|
||||
this.isPanelVisible = false;
|
||||
}
|
||||
|
||||
updateUI() {
|
||||
const activeCount = this.activeUploads.size;
|
||||
|
||||
// 更新后台按钮
|
||||
if (activeCount > 0) {
|
||||
this.btnBackground.style.display = 'inline-block';
|
||||
this.uploadCount.textContent = activeCount;
|
||||
} else {
|
||||
this.btnBackground.style.display = 'none';
|
||||
}
|
||||
|
||||
// 更新面板标题
|
||||
this.activeCount.textContent = activeCount;
|
||||
|
||||
// 更新列表
|
||||
if (this.isPanelVisible) {
|
||||
this.renderUploadList();
|
||||
}
|
||||
}
|
||||
|
||||
renderUploadList() {
|
||||
const list = this.backgroundList;
|
||||
list.innerHTML = '';
|
||||
|
||||
if (this.activeUploads.size === 0) {
|
||||
list.innerHTML = '<div class="empty-state">暂无后台传输任务</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
this.activeUploads.forEach(task => {
|
||||
const item = this.createUploadItem(task);
|
||||
list.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
createUploadItem(task) {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'background-item';
|
||||
item.dataset.id = task.id;
|
||||
|
||||
const statusIcon = task.status === 'completed' ? '✓' :
|
||||
task.status === 'failed' ? '✗' : '⏳';
|
||||
|
||||
item.innerHTML = `
|
||||
<div class="item-icon">${getFileIcon(task.fileName)}</div>
|
||||
<div class="item-info">
|
||||
<div class="item-name">${escapeHtml(task.fileName)}</div>
|
||||
<div class="item-progress">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: ${task.progress}%"></div>
|
||||
</div>
|
||||
<div class="progress-text">
|
||||
<span class="progress-percent">${Math.round(task.progress)}%</span>
|
||||
${task.chunks ? `<span class="progress-chunks">(${task.chunks})</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-status">
|
||||
<span class="status-icon">${statusIcon}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
notifyUIUpdate() {
|
||||
this.updateUI();
|
||||
}
|
||||
|
||||
onUpdate(callback) {
|
||||
this.onUpdateCallbacks.push(callback);
|
||||
}
|
||||
}
|
||||
|
||||
const elements = {
|
||||
fileListBody: document.getElementById('file-list-body'),
|
||||
@@ -59,9 +322,29 @@
|
||||
loadFiles(currentPath);
|
||||
setupEventListeners();
|
||||
initDropzone();
|
||||
initBackgroundManager();
|
||||
startWatch();
|
||||
}
|
||||
|
||||
function initBackgroundManager() {
|
||||
backgroundManager = new BackgroundUploadManager();
|
||||
backgroundManager.init();
|
||||
}
|
||||
|
||||
function handleUploadModalClose() {
|
||||
// 检查是否有正在上传的文件
|
||||
const uploadingFiles = uploadDropzone ? uploadDropzone.getUploadingFiles() : [];
|
||||
const queuedFiles = uploadDropzone ? uploadDropzone.getQueuedFiles() : [];
|
||||
|
||||
if (uploadingFiles.length > 0 || queuedFiles.length > 0) {
|
||||
// 转移到后台管理器
|
||||
backgroundManager.takeOverUploads(uploadDropzone);
|
||||
}
|
||||
|
||||
// 隐藏模态框
|
||||
elements.uploadModal.classList.remove('active');
|
||||
}
|
||||
|
||||
function loadFiles(path) {
|
||||
elements.fileListBody.innerHTML = '<tr><td colspan="5" class="loading">加载中...</td></tr>';
|
||||
|
||||
@@ -609,11 +892,11 @@
|
||||
});
|
||||
|
||||
elements.uploadClose.addEventListener('click', function() {
|
||||
elements.uploadModal.classList.remove('active');
|
||||
handleUploadModalClose();
|
||||
});
|
||||
|
||||
elements.uploadCloseBtn.addEventListener('click', function() {
|
||||
elements.uploadModal.classList.remove('active');
|
||||
handleUploadModalClose();
|
||||
});
|
||||
|
||||
document.addEventListener('click', function(e) {
|
||||
@@ -621,7 +904,7 @@
|
||||
if (e.target === elements.moveModal) elements.moveModal.classList.remove('active');
|
||||
if (e.target === elements.newDirModal) elements.newDirModal.classList.remove('active');
|
||||
if (e.target === elements.renameModal) elements.renameModal.classList.remove('active');
|
||||
if (e.target === elements.uploadModal) elements.uploadModal.classList.remove('active');
|
||||
if (e.target === elements.uploadModal) handleUploadModalClose();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user