Add progress tracking to downloads

static/css/style.css

@@ -18,8 +18,8 @@
     
     /* Z-index Scale */
     --z-base: 10;
-    --z-modal: 30;
-    --z-overlay: 50;
+    --z-modal: 1000;     /* 更新modal的z-index */
+    --z-overlay: 2000;   /* 更新overlay的z-index,确保比modal高 */
 
     /* Border Radius */
     --border-radius-base: 12px;
@@ -274,7 +274,7 @@ body {
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
-    z-index: 1000;
+    z-index: var(--z-modal);
     overflow-y: auto;  /* 允许模态窗口内容滚动 */
 }
 
@@ -665,8 +665,7 @@ body.modal-open {
     padding: 12px 16px;
     border-radius: var(--border-radius-sm);
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-    /* z-index: calc(var(--z-overlay) + 10); */
-    z-index: 1000; /* 保证在其他元素之上 */
+    z-index: calc(var(--z-overlay) + 10); /* 让toast显示在最上层 */
     opacity: 0;
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                 opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);

static/js/managers/DownloadManager.js

@@ -1,5 +1,6 @@
 import { modalManager } from './ModalManager.js';
 import { showToast } from '../utils/uiHelpers.js';
+import { LoadingManager } from './LoadingManager.js';
 
 export class DownloadManager {
     constructor() {
@@ -11,6 +12,9 @@ export class DownloadManager {
         // Add initialization check
         this.initialized = false;
         this.selectedFolder = '';
+
+        // Add LoadingManager instance
+        this.loadingManager = new LoadingManager();
     }
 
     showDownloadModal() {
@@ -45,6 +49,9 @@ export class DownloadManager {
         const errorElement = document.getElementById('urlError');
         
         try {
+            // Show loading while fetching versions
+            this.loadingManager.showSimpleLoading('Fetching model versions...');
+            
             const modelId = this.extractModelId(url);
             if (!modelId) {
                 throw new Error('Invalid Civitai URL format');
@@ -68,6 +75,9 @@ export class DownloadManager {
             this.showVersionStep();
         } catch (error) {
             errorElement.textContent = error.message;
+        } finally {
+            // Hide loading when done
+            this.loadingManager.hide();
         }
     }
 
@@ -155,9 +165,6 @@ export class DownloadManager {
             return;
         }
 
-        console.log('Selected folder:', this.selectedFolder); // Log selected folder
-        console.log('New folder:', newFolder); // Log new folder
-
         // Construct relative path
         let relativePath = '';
         if (this.selectedFolder) {
@@ -174,7 +181,20 @@ export class DownloadManager {
                 throw new Error('No download URL available');
             }
 
-            // 只传递必要参数
+            // Show loading with progress bar for download
+            this.loadingManager.show('Downloading LoRA...', 0);
+
+            // Setup WebSocket for progress updates
+            const ws = new WebSocket(`ws://${window.location.host}/ws/fetch-progress`);
+            ws.onmessage = (event) => {
+                const data = JSON.parse(event.data);
+                if (data.status === 'progress') {
+                    this.loadingManager.setProgress(data.progress);
+                    this.loadingManager.setStatus(`Downloading: ${data.progress}%`);
+                }
+            };
+
+            // Start download
             const response = await fetch('/api/download-lora', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -195,8 +215,11 @@ export class DownloadManager {
             
             // Refresh the grid to show new model
             window.refreshLoras(false);
+
         } catch (error) {
             showToast(error.message, 'error');
+        } finally {
+            this.loadingManager.hide();
         }
     }