feat(preview): 更好的预览体验

Author: wsshow

js/src/main.ts

@@ -27,6 +27,14 @@ function loadScript(src: string): Promise<void> {
     });
 }
 
+function hidePageLoader() {
+    const loader = document.getElementById('page-loader');
+    if (loader) {
+        loader.classList.add('hidden');
+        setTimeout(() => loader.remove(), 300);
+    }
+}
+
 const initTerminal = (authToken: string = '') => {
     const elem = document.getElementById("terminal");
 
@@ -88,6 +96,7 @@ if (shareMatch) {
         h(SharePage, { token: shareToken, basePath }),
         shareContainer
     );
+    hidePageLoader();
 } else {
     // Normal page: load config scripts then initialize
     Promise.all([loadScript('./auth_token.js'), loadScript('./config.js')]).then(() => {
@@ -98,6 +107,7 @@ if (shareMatch) {
             const loginContainer = document.createElement("div");
             loginContainer.id = "login-container";
             document.body.appendChild(loginContainer);
+            hidePageLoader();
 
             render(
                 h(Login, {
@@ -113,19 +123,24 @@ if (shareMatch) {
         } else {
             initTerminal(storedAuth || '');
             initFileManager();
+            hidePageLoader();
         }
     }).catch((err) => {
         console.error('Failed to load config scripts:', err);
         // Fallback: try to initialize anyway
         initTerminal('');
         initFileManager();
+        hidePageLoader();
     });
 }
 
 function initFileManager() {
     const fileManagerBtn = document.getElementById("file-manager-btn") as HTMLElement | null;
     if (!fileManagerBtn) return;
 
+    // Show the button now that initialization is complete
+    fileManagerBtn.classList.add('ready');
+
     let fileManagerContainer: HTMLDivElement | null = null;
 
     // Draggable functionality

resources/filemanager.css

@@ -371,12 +371,18 @@
     font-size: 14px;
     z-index: 1000;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
-    display: flex;
+    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, opacity 0.3s;
+    display: none;
     align-items: center;
     justify-content: center;
     user-select: none;
     touch-action: none;
+    opacity: 0;
+}
+
+.file-manager-btn.ready {
+    display: flex;
+    opacity: 1;
 }
 
 .file-manager-btn:hover {
@@ -2608,4 +2614,78 @@ input[type="checkbox"] {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+    .share-page {
+        padding: 16px;
+    }
+
+    .share-page-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+    }
+
+    .share-page-header h1 {
+        font-size: 16px;
+        word-break: break-all;
+    }
+
+    .share-page-header-right {
+        flex-wrap: wrap;
+        gap: 8px;
+        width: 100%;
+    }
+
+    .share-expires-info {
+        font-size: 12px;
+    }
+
+    .share-download-btn {
+        padding: 8px 14px;
+        font-size: 13px;
+    }
+
+    .file-manager {
+        width: 98%;
+        max-height: 90vh;
+        border-radius: 6px;
+    }
+
+    .breadcrumb {
+        flex-wrap: wrap;
+        gap: 6px;
+    }
+
+    .search-box {
+        min-width: 120px;
+        max-width: none;
+        flex: 1;
+    }
+
+    .upload-section {
+        flex-wrap: wrap;
+        gap: 6px;
+    }
+
+    .upload-btn,
+    .refresh-btn,
+    .batch-download-btn,
+    .batch-delete-btn,
+    .share-manage-btn {
+        padding: 6px 10px;
+        font-size: 12px;
+    }
+
+    .file-manager-body {
+        padding: 12px;
+    }
+
+    .share-page-files table th,
+    .share-page-files table td {
+        padding: 8px 6px;
+        font-size: 12px;
+    }
 }

resources/index.css

@@ -1,9 +1,46 @@
-html, body, #terminal {
-    background: black;
-    height: 100%;
-    width: 100%;
-    padding: 0%;
-    margin: 0%;
+html,
+body,
+#terminal {
+  background: black;
+  height: 100%;
+  width: 100%;
+  padding: 0%;
+  margin: 0%;
+}
+
+/* Page loader */
+.page-loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #000;
+  z-index: 10000;
+  transition: opacity 0.3s;
+}
+
+.page-loader.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.page-loader-spinner {
+  width: 36px;
+  height: 36px;
+  border: 3px solid #333;
+  border-top-color: #888;
+  border-radius: 50%;
+  animation: page-spin 0.8s linear infinite;
+}
+
+@keyframes page-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .progress .progress-bar {

resources/index.html

@@ -16,6 +16,9 @@
 </head>
 
 <body>
+  <div id="page-loader" class="page-loader">
+    <div class="page-loader-spinner"></div>
+  </div>
   <button id="file-manager-btn" class="file-manager-btn" title="文件管理">
     <svg class="file-manager-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
       <path