Upload 13 files

index.html

@@ -21,9 +21,9 @@
             box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
         }
         
-        header {
-            margin-top: 130px; /* 为输入区留空间 */
-        }
+        header {
+            margin-top: 115px; /* 为输入区留空间 */
+        }
         
         .history-container {
             padding-bottom: 20px !important;
@@ -31,13 +31,13 @@
         
         /* 调整输入区内部布局 */
         .control-bar {
-            max-width: 1320px;
+            max-width: 1400px;
             margin: 0 auto;
             padding: 12px 20px !important;
         }
         
         .preview-bar {
-            max-width: 1320px;
+            max-width: 1400px;
             margin: 0 auto;
             padding: 0 20px;
         }
@@ -47,9 +47,9 @@
         }
         
         /* 动态调整header间距 */
-        .has-preview header {
-            margin-top: 280px;
-        }
+        .has-preview header {
+            margin-top: 260px;
+        }
         
         @media (max-width: 768px) {
             header {
@@ -167,13 +167,17 @@
             <div class="modal-img-area">
                 <img id="m-img" src="">
             </div>
-            <div class="modal-footer">
-                <div class="input-refs" id="m-refs"></div>
-                <div class="prompt-display" id="m-prompt"></div>
-                <button class="btn-3d" id="m-reuse" style="width: 100%; padding: 12px;">
-                    复用参数与图片
-                </button>
-            </div>
+            <div class="modal-footer">
+                <div class="input-refs" id="m-refs"></div>
+                <div class="prompt-display" id="m-prompt"></div>
+                <div class="modal-actions">
+                    <button class="icon-btn" id="m-fullscreen" title="全屏查看" aria-label="全屏查看">全屏</button>
+                    <button class="icon-btn" id="m-download" title="保存图片" aria-label="保存图片">保存</button>
+                </div>
+                <button class="btn-3d" id="m-reuse" style="width: 100%; padding: 12px;">
+                    复用参数与图片
+                </button>
+            </div>
         </div>
     </div>
     
@@ -685,7 +689,7 @@
         init() {
             this.container = document.getElementById('gallery');
             this.loadMoreBtn = document.getElementById('gallery-load-more');
-            this.pageSize = Device.isMobile ? 6 : 12;
+            this.pageSize = Device.isMobile ? 12 : 12;
             this.visibleCount = this.pageSize;
             if (this.loadMoreBtn) {
                 this.loadMoreBtn.onclick = () => this.loadMore();
@@ -722,7 +726,7 @@
 
         loadMore() {
             const total = AppState.galleryData.length;
-            if (!total) return;
+            if (!total || this.visibleCount >= total) return;
             const scroller = this.container ? this.container.closest('.history-container') : null;
             const scrollTop = scroller ? scroller.scrollTop : window.scrollY;
             this.visibleCount = Math.min(total, (this.visibleCount || this.pageSize) + this.pageSize);
@@ -960,19 +964,23 @@
     // ============================================
     // 弹窗管理模块
     // ============================================
-    const ModalManager = {
-        modal: null,
-        imgEl: null,
-        promptEl: null,
-        refsEl: null,
-        reuseBtn: null,
-        
-        init() {
-            this.modal = document.getElementById('modal');
-            this.imgEl = document.getElementById('m-img');
-            this.promptEl = document.getElementById('m-prompt');
-            this.refsEl = document.getElementById('m-refs');
-            this.reuseBtn = document.getElementById('m-reuse');
+    const ModalManager = {
+        modal: null,
+        imgEl: null,
+        promptEl: null,
+        refsEl: null,
+        reuseBtn: null,
+        fullscreenBtn: null,
+        downloadBtn: null,
+        
+        init() {
+            this.modal = document.getElementById('modal');
+            this.imgEl = document.getElementById('m-img');
+            this.promptEl = document.getElementById('m-prompt');
+            this.refsEl = document.getElementById('m-refs');
+            this.reuseBtn = document.getElementById('m-reuse');
+            this.fullscreenBtn = document.getElementById('m-fullscreen');
+            this.downloadBtn = document.getElementById('m-download');
             
             // 点击背景关闭
             this.modal.onclick = (e) => {
@@ -1006,16 +1014,27 @@
                 });
             }
             
-            // 绑定复用按钮
-            this.reuseBtn.onclick = () => this.reuse();
-            
-            this.modal.style.display = 'flex';
-        },
-        
-        close() {
-            this.modal.style.display = 'none';
-            AppState.currentModalItem = null;
-        },
+            // 绑定复用按钮
+            this.reuseBtn.onclick = () => this.reuse();
+            if (this.fullscreenBtn) {
+                this.fullscreenBtn.onclick = () => this.toggleFullscreen();
+            }
+            if (this.downloadBtn) {
+                this.downloadBtn.onclick = () => this.downloadCurrent();
+            }
+            
+            this.modal.style.display = 'flex';
+        },
+        
+        close() {
+            this.modal.style.display = 'none';
+            AppState.currentModalItem = null;
+            if (document.fullscreenElement && document.exitFullscreen) {
+                document.exitFullscreen();
+            } else if (document.webkitFullscreenElement && document.webkitExitFullscreen) {
+                document.webkitExitFullscreen();
+            }
+        },
         
         reuse() {
             const item = AppState.currentModalItem;
@@ -1034,10 +1053,41 @@
                 ImageHandler.clear();
             }
             
-            this.close();
-            textarea.focus();
-        }
-    };
+            this.close();
+            textarea.focus();
+        },
+
+        toggleFullscreen() {
+            const target = this.modal;
+            if (!target) return;
+            if (document.fullscreenElement || document.webkitFullscreenElement) {
+                if (document.exitFullscreen) {
+                    document.exitFullscreen();
+                } else if (document.webkitExitFullscreen) {
+                    document.webkitExitFullscreen();
+                }
+                return;
+            }
+            if (target.requestFullscreen) {
+                target.requestFullscreen();
+            } else if (target.webkitRequestFullscreen) {
+                target.webkitRequestFullscreen();
+            }
+        },
+
+        downloadCurrent() {
+            const item = AppState.currentModalItem;
+            if (!item) return;
+            const src = ImageHandler.getDisplayImage(item) || item.image || item.imageUrl || item.thumb;
+            if (!src) return;
+            const link = document.createElement('a');
+            link.href = src;
+            link.download = `banana-pro-${item.id || Date.now()}.png`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    };
 
     // ============================================
     // 公共画廊管理模块
@@ -1066,7 +1116,7 @@
             this.refreshBtn = document.getElementById('refresh-public-gallery');
             this.hintEl = document.getElementById('public-gallery-hint');
             this.loadMoreBtn = document.getElementById('public-gallery-load-more');
-            this.pageSize = Device.isMobile ? 6 : 12;
+            this.pageSize = Device.isMobile ? 12 : 12;
             this.visibleCount = this.pageSize;
             this.tokens = this.loadTokens();
             if (this.hintEl && this.hintEl.textContent) {
@@ -1081,9 +1131,35 @@
                 this.loadMoreBtn.onclick = () => this.loadMore();
             }
 
+            this.bindAutoLoad();
             this.initialFetch();
         },
 
+        bindAutoLoad() {
+            if (!Device.isMobile || this.autoLoadBound) return;
+            const scroller = document.querySelector('.history-container');
+            if (!scroller) return;
+            this.autoLoadBound = true;
+            this.scroller = scroller;
+            this.autoLoading = false;
+
+            const onScroll = () => {
+                if (this.autoLoading) return;
+                const total = (AppState.publicGalleryData || []).length;
+                if (!total || this.visibleCount >= total) return;
+                const nearBottom = scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 240;
+                if (!nearBottom) return;
+                this.autoLoading = true;
+                this.loadMore();
+                setTimeout(() => {
+                    this.autoLoading = false;
+                }, 120);
+            };
+
+            scroller.addEventListener('scroll', onScroll, { passive: true });
+            this.autoLoadHandler = onScroll;
+        },
+
         resetPagination() {
             this.visibleCount = this.pageSize;
         },
@@ -1114,7 +1190,7 @@
 
         loadMore() {
             const total = AppState.publicGalleryData.length;
-            if (!total) return;
+            if (!total || this.visibleCount >= total) return;
             const scroller = this.container ? this.container.closest('.history-container') : null;
             const scrollTop = scroller ? scroller.scrollTop : window.scrollY;
             this.visibleCount = Math.min(total, (this.visibleCount || this.pageSize) + this.pageSize);

style.css

@@ -156,7 +156,7 @@ body {
 
 /* --- Layout --- */
 .app-container {
-    max-width: 1320px;
+    max-width: 1400px;
     margin: 0 auto;
     width: 100%;
     height: 100%;
@@ -314,7 +314,7 @@ header h2 {
 
 
 body.has-preview header {
-    margin-top: 360px;
+    margin-top: 260px;
 }
 
 /* --- History Gallery --- */
@@ -1188,16 +1188,27 @@ body.has-preview header {
     }
 }
 
-.modal-footer { 
-    padding: 20px; 
-    background: rgba(30, 41, 59, 0.95);
+.modal-footer { 
+    padding: 20px; 
+    background: rgba(30, 41, 59, 0.95);
     backdrop-filter: blur(16px);
     border-top: 1px solid var(--panel-border-strong); 
     display: flex; 
-    flex-direction: column; 
-    gap: 12px;
-    border-radius: 0 0 20px 20px;
-}
+    flex-direction: column; 
+    gap: 12px;
+    border-radius: 0 0 20px 20px;
+}
+
+.modal-actions {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.modal-actions .icon-btn {
+    min-width: 110px;
+    height: 36px;
+}
 
 .input-refs { 
     display: flex;