Upload index.html

index.html

@@ -6,7 +6,7 @@
     <title>Banana Pro AI</title>
     <link rel="stylesheet" href="style.css">
     <style>
-        /* 顶部固定布局 */
+        /* 顶部固定布局样式 */
         .input-section {
             position: fixed !important;
             top: 0 !important;
@@ -140,106 +140,39 @@
     </div>
     
     <script>
-    // ============================================
-    // 应用配置
-    // ============================================
-    const CONFIG = {
-        DB_NAME: 'BananaProDB_v3',
-        DB_VERSION: 1,
-        STORE_NAME: 'artworks',
-        MAX_IMAGES: 16,
-        ERROR_IMAGE: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect fill="%23333" width="100" height="100"/><text fill="%23666" x="50%" y="50%" text-anchor="middle" dy=".3em">Error</text></svg>'
-    };
-    
     // ============================================
     // 全局状态管理
     // ============================================
-    class AppState {
-        constructor() {
-            this.db = null;
-            this.currentImages = [];
-            this.galleryData = [];
-            this.currentModalItem = null;
-            this._listeners = new Map();
-        }
-        
-        // 简单的事件系统
-        on(event, callback) {
-            if (!this._listeners.has(event)) {
-                this._listeners.set(event, new Set());
-            }
-            this._listeners.get(event).add(callback);
-        }
-        
-        emit(event, data) {
-            if (this._listeners.has(event)) {
-                this._listeners.get(event).forEach(callback => callback(data));
-            }
-        }
-    }
-    
-    const appState = new AppState();
-    
-    // ============================================
-    // 工具函数
-    // ============================================
-    const Utils = {
-        // 防抖函数
-        debounce(func, wait) {
-            let timeout;
-            return function executedFunction(...args) {
-                const later = () => {
-                    clearTimeout(timeout);
-                    func(...args);
-                };
-                clearTimeout(timeout);
-                timeout = setTimeout(later, wait);
-            };
-        },
-        
-        // 创建元素的辅助函数
-        createElement(tag, attrs = {}, children = []) {
-            const el = document.createElement(tag);
-            Object.entries(attrs).forEach(([key, value]) => {
-                if (key === 'className') {
-                    el.className = value;
-                } else if (key === 'textContent') {
-                    el.textContent = value;
-                } else if (key.startsWith('on')) {
-                    el.addEventListener(key.slice(2).toLowerCase(), value);
-                } else {
-                    el.setAttribute(key, value);
-                }
-            });
-            children.forEach(child => {
-                if (typeof child === 'string') {
-                    el.appendChild(document.createTextNode(child));
-                } else {
-                    el.appendChild(child);
-                }
-            });
-            return el;
-        }
+    const AppState = {
+        db: null,
+        currentImages: [],     // 当前上传的图片 Base64 数组
+        galleryData: [],       // 画廊数据缓存
+        currentModalItem: null // 当前弹窗显示的项目
     };
     
+    const DB_NAME = 'BananaProDB_v3';
+    const DB_VERSION = 1;
+    const STORE_NAME = 'artworks';
+    
     // ============================================
-    // IndexedDB 模块
+    // IndexedDB 模块（使用 Blob 存储避免 Base64 问题）
     // ============================================
-    class Database {
-        static async init() {
+    const Database = {
+        async init() {
             return new Promise((resolve, reject) => {
-                const request = indexedDB.open(CONFIG.DB_NAME, CONFIG.DB_VERSION);
+                const request = indexedDB.open(DB_NAME, DB_VERSION);
+                
+                request.onerror = () => reject(request.error);
                 
-                request.onerror = () => reject(new Error('数据库打开失败'));
                 request.onsuccess = () => {
-                    appState.db = request.result;
+                    AppState.db = request.result;
                     resolve();
                 };
                 
                 request.onupgradeneeded = (event) => {
                     const db = event.target.result;
-                    if (!db.objectStoreNames.contains(CONFIG.STORE_NAME)) {
-                        const store = db.createObjectStore(CONFIG.STORE_NAME, {
+                    if (!db.objectStoreNames.contains(STORE_NAME)) {
+                        const store = db.createObjectStore(STORE_NAME, {
                             keyPath: 'id',
                             autoIncrement: true
                         });
@@ -247,205 +180,195 @@
                     }
                 };
             });
-        }
+        },
         
-        static async transaction(storeName, mode, operation) {
+        async save(item) {
             return new Promise((resolve, reject) => {
-                const tx = appState.db.transaction([storeName], mode);
-                const store = tx.objectStore(storeName);
-                
-                tx.oncomplete = () => resolve(result);
-                tx.onerror = () => reject(new Error('事务执行失败'));
+                const tx = AppState.db.transaction([STORE_NAME], 'readwrite');
+                const store = tx.objectStore(STORE_NAME);
                 
-                let result;
-                try {
-                    result = operation(store);
-                } catch (error) {
-                    reject(error);
-                }
-            });
-        }
-        
-        static async save(item) {
-            return this.transaction(CONFIG.STORE_NAME, 'readwrite', (store) => {
+                // 直接存储完整对象，不做任何转换
                 const record = {
-                    ...item,
+                    prompt: item.prompt,
+                    image: item.image,           // 完整的 data:image/... 字符串
+                    inputImages: item.inputImages || [],
                     timestamp: Date.now()
                 };
-                return store.add(record);
+                
+                const request = store.add(record);
+                request.onsuccess = () => resolve(request.result);
+                request.onerror = () => reject(request.error);
             });
-        }
+        },
         
-        static async getAll() {
+        async getAll() {
             return new Promise((resolve, reject) => {
-                const tx = appState.db.transaction([CONFIG.STORE_NAME], 'readonly');
-                const store = tx.objectStore(CONFIG.STORE_NAME);
+                const tx = AppState.db.transaction([STORE_NAME], 'readonly');
+                const store = tx.objectStore(STORE_NAME);
                 const request = store.getAll();
                 
                 request.onsuccess = () => {
+                    // 按时间戳倒序
                     const results = request.result.sort((a, b) => b.timestamp - a.timestamp);
                     resolve(results);
                 };
-                request.onerror = () => reject(new Error('读取数据失败'));
+                request.onerror = () => reject(request.error);
             });
-        }
+        },
         
-        static async delete(id) {
-            return this.transaction(CONFIG.STORE_NAME, 'readwrite', (store) => {
-                return store.delete(id);
+        async delete(id) {
+            return new Promise((resolve, reject) => {
+                const tx = AppState.db.transaction([STORE_NAME], 'readwrite');
+                const store = tx.objectStore(STORE_NAME);
+                const request = store.delete(id);
+                request.onsuccess = () => resolve();
+                request.onerror = () => reject(request.error);
             });
-        }
+        },
         
-        static async getById(id) {
+        async getById(id) {
             return new Promise((resolve, reject) => {
-                const tx = appState.db.transaction([CONFIG.STORE_NAME], 'readonly');
-                const store = tx.objectStore(CONFIG.STORE_NAME);
+                const tx = AppState.db.transaction([STORE_NAME], 'readonly');
+                const store = tx.objectStore(STORE_NAME);
                 const request = store.get(id);
-                
                 request.onsuccess = () => resolve(request.result);
-                request.onerror = () => reject(new Error('获取数据失败'));
+                request.onerror = () => reject(request.error);
             });
         }
-    }
+    };
     
     // ============================================
     // 图片处理模块
     // ============================================
-    class ImageHandler {
-        static fileToBase64(file) {
+    const ImageHandler = {
+        // 文件转 Base64
+        fileToBase64(file) {
             return new Promise((resolve, reject) => {
                 const reader = new FileReader();
                 reader.onload = () => resolve(reader.result);
-                reader.onerror = reject;
+                reader.onerror = () => reject(reader.error);
                 reader.readAsDataURL(file);
             });
-        }
+        },
         
-        static async processFiles(files) {
+        // 处理上传的文件
+        async processFiles(files) {
+            const maxImages = 16;
             const imageFiles = Array.from(files).filter(f => f.type.startsWith('image/'));
-            const promises = [];
             
             for (const file of imageFiles) {
-                if (appState.currentImages.length >= CONFIG.MAX_IMAGES) {
-                    alert(`最多只能上传 ${CONFIG.MAX_IMAGES} 张图片`);
+                if (AppState.currentImages.length >= maxImages) {
+                    alert(`最多只能上传 ${maxImages} 张图片`);
                     break;
                 }
-                promises.push(this.fileToBase64(file));
+                
+                try {
+                    const base64 = await this.fileToBase64(file);
+                    AppState.currentImages.push(base64);
+                } catch (err) {
+                    console.error('图片读取失败:', err);
+                }
             }
             
-            try {
-                const results = await Promise.all(promises);
-                appState.currentImages.push(...results);
-                appState.emit('imagesChanged');
-            } catch (err) {
-                console.error('图片读取失败:', err);
-                alert('部分图片读取失败');
-            }
-        }
-        
-        static removeAt(index) {
-            appState.currentImages.splice(index, 1);
-            appState.emit('imagesChanged');
-        }
+            PreviewManager.render();
+        },
         
-        static clear() {
-            appState.currentImages = [];
-            appState.emit('imagesChanged');
-        }
+        // 移除指定索引的图片
+        removeAt(index) {
+            AppState.currentImages.splice(index, 1);
+            PreviewManager.render();
+        },
         
-        static setImages(images) {
-            appState.currentImages = images ? [...images] : [];
-            appState.emit('imagesChanged');
-        }
-    }
-    
-    // ============================================
-    // UI组件基类
-    // ============================================
-    class Component {
-        constructor(container) {
-            this.container = typeof container === 'string' 
-                ? document.getElementById(container) 
-                : container;
-        }
+        // 清空所有上传的图片
+        clear() {
+            AppState.currentImages = [];
+            PreviewManager.render();
+        },
         
-        render() {
-            throw new Error('render method must be implemented');
+        // 设置图片（用于复用功能）
+        setImages(images) {
+            AppState.currentImages = images ? [...images] : [];
+            PreviewManager.render();
         }
-    }
+    };
     
     // ============================================
     // 预览条管理模块
     // ============================================
-    class PreviewManager extends Component {
-        constructor() {
-            super('preview-bar');
+    const PreviewManager = {
+        container: null,
+        uploadBtn: null,
+        statusBar: null,
+        
+        init() {
+            this.container = document.getElementById('preview-bar');
             this.uploadBtn = document.getElementById('upload-btn');
             this.statusBar = document.getElementById('status-bar');
-            
-            // 监听图片变化
-            appState.on('imagesChanged', () => this.render());
-        }
+        },
         
         render() {
-            const images = appState.currentImages;
+            // 清空容器
+            this.container.innerHTML = '';
             
-            // 使用 DocumentFragment 减少重排
-            const fragment = document.createDocumentFragment();
+            const images = AppState.currentImages;
             
             if (images.length === 0) {
                 this.container.classList.remove('visible');
                 this.uploadBtn.classList.remove('active');
                 this.statusBar.textContent = 'Ready';
-                this.container.innerHTML = '';
                 return;
             }
             
             this.container.classList.add('visible');
             this.uploadBtn.classList.add('active');
-            this.statusBar.textContent = `已选择 ${images.length}/${CONFIG.MAX_IMAGES} 张图片`;
+            this.statusBar.textContent = `已选择 ${images.length}/16 张图片`;
             
+            // 使用 DOM API 创建元素，避免 innerHTML 导致的编码问题
             images.forEach((imgData, index) => {
-                const wrapper = Utils.createElement('div', { className: 'thumb-wrapper' }, [
-                    Utils.createElement('img', { src: imgData }),
-                    Utils.createElement('div', {
-                        className: 'thumb-remove',
-                        textContent: '×',
-                        onClick: (e) => {
-                            e.stopPropagation();
-                            ImageHandler.removeAt(index);
-                        }
-                    })
-                ]);
-                fragment.appendChild(wrapper);
+                const wrapper = document.createElement('div');
+                wrapper.className = 'thumb-wrapper';
+                
+                const img = document.createElement('img');
+                img.src = imgData;  // 直接设置 src，不经过字符串拼接
+                
+                const removeBtn = document.createElement('div');
+                removeBtn.className = 'thumb-remove';
+                removeBtn.textContent = '×';
+                removeBtn.onclick = (e) => {
+                    e.stopPropagation();
+                    ImageHandler.removeAt(index);
+                };
+                
+                wrapper.appendChild(img);
+                wrapper.appendChild(removeBtn);
+                this.container.appendChild(wrapper);
             });
-            
-            this.container.innerHTML = '';
-            this.container.appendChild(fragment);
         }
-    }
+    };
     
     // ============================================
     // 画廊管理模块
     // ============================================
-    class GalleryManager extends Component {
-        constructor() {
-            super('gallery');
-            this.renderDebounced = Utils.debounce(() => this.render(), 100);
-        }
+    const GalleryManager = {
+        container: null,
+        
+        init() {
+            this.container = document.getElementById('gallery');
+        },
         
         async load() {
             try {
-                appState.galleryData = await Database.getAll();
+                AppState.galleryData = await Database.getAll();
                 this.render();
             } catch (err) {
                 console.error('加载画廊失败:', err);
-                alert('加载画廊失败，请刷新页面重试');
             }
-        }
+        },
         
         render() {
-            if (appState.galleryData.length === 0) {
+            this.container.innerHTML = '';
+            
+            if (AppState.galleryData.length === 0) {
                 this.container.innerHTML = `
                     <div style="grid-column: 1/-1; text-align: center; color: var(--text-sub); padding: 60px 20px;">
                         <div style="font-size: 48px; margin-bottom: 10px;">🎨</div>
@@ -455,75 +378,74 @@
                 return;
             }
             
-            const fragment = document.createDocumentFragment();
-            appState.galleryData.forEach(item => {
-                fragment.appendChild(this.createCard(item));
+            AppState.galleryData.forEach(item => {
+                const card = this.createCard(item);
+                this.container.appendChild(card);
             });
-            
-            this.container.innerHTML = '';
-            this.container.appendChild(fragment);
-        }
+        },
         
         createCard(item) {
-            const card = Utils.createElement('div', {
-                className: 'history-item',
-                'data-id': item.id,
-                onClick: () => ModalManager.open(item)
-            });
+            const el = document.createElement('div');
+            el.className = 'history-item';
+            el.dataset.id = item.id;
             
             // 参考图标记
-            if (item.inputImages?.length > 0) {
-                card.appendChild(Utils.createElement('div', {
-                    className: 'item-badge',
-                    textContent: `📎 ${item.inputImages.length}`
-                }));
+            if (item.inputImages && item.inputImages.length > 0) {
+                const badge = document.createElement('div');
+                badge.className = 'item-badge';
+                badge.textContent = `📎 ${item.inputImages.length}`;
+                el.appendChild(badge);
             }
             
-            // 主图片
-            const img = Utils.createElement('img', {
-                loading: 'lazy',
-                src: item.image,
-                onError: function() {
-                    this.src = CONFIG.ERROR_IMAGE;
-                    console.error('图片加载失败, ID:', item.id);
-                }
-            });
-            card.appendChild(img);
+            // 主图片 - 使用 DOM API 设置 src
+            const img = document.createElement('img');
+            img.loading = 'lazy';
+            img.src = item.image;  // 关键：直接赋值，不用模板字符串
+            img.onerror = () => {
+                console.error('图片加载失败, ID:', item.id);
+                img.src = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect fill="%23333" width="100" height="100"/><text fill="%23666" x="50%" y="50%" text-anchor="middle" dy=".3em">Error</text></svg>';
+            };
+            el.appendChild(img);
             
             // 操作按钮
-            const actions = Utils.createElement('div', { className: 'item-actions' }, [
-                Utils.createElement('button', {
-                    className: 'icon-btn',
-                    innerHTML: '⬇',
-                    onClick: (e) => {
-                        e.stopPropagation();
-                        this.downloadImage(item);
-                    }
-                }),
-                Utils.createElement('button', {
-                    className: 'icon-btn',
-                    style: 'background: rgba(239,68,68,0.8)',
-                    innerHTML: '🗑',
-                    onClick: (e) => {
-                        e.stopPropagation();
-                        this.deleteItem(item.id);
-                    }
-                })
-            ]);
-            card.appendChild(actions);
+            const actions = document.createElement('div');
+            actions.className = 'item-actions';
+            
+            const downloadBtn = document.createElement('button');
+            downloadBtn.className = 'icon-btn';
+            downloadBtn.innerHTML = '⬇';
+            downloadBtn.onclick = (e) => {
+                e.stopPropagation();
+                this.downloadImage(item);
+            };
             
-            return card;
-        }
+            const deleteBtn = document.createElement('button');
+            deleteBtn.className = 'icon-btn';
+            deleteBtn.style.background = 'rgba(239,68,68,0.8)';
+            deleteBtn.innerHTML = '🗑';
+            deleteBtn.onclick = (e) => {
+                e.stopPropagation();
+                this.deleteItem(item.id);
+            };
+            
+            actions.appendChild(downloadBtn);
+            actions.appendChild(deleteBtn);
+            el.appendChild(actions);
+            
+            // 点击打开弹窗
+            el.onclick = () => ModalManager.open(item);
+            
+            return el;
+        },
         
         downloadImage(item) {
-            const link = Utils.createElement('a', {
-                href: item.image,
-                download: `banana-pro-${item.id}-${Date.now()}.png`
-            });
+            const link = document.createElement('a');
+            link.href = item.image;
+            link.download = `banana-pro-${item.id}-${Date.now()}.png`;
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
-        }
+        },
         
         async deleteItem(id) {
             if (!confirm('确定要删除这张图片吗？')) return;
@@ -533,125 +455,135 @@
                 await this.load();
             } catch (err) {
                 console.error('删除失败:', err);
-                alert('删除失败，请重试');
+                alert('删除失败');
             }
         }
-    }
+    };
     
     // ============================================
     // 弹窗管理模块
     // ============================================
-    class ModalManager {
-        static init() {
+    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');
             
-            // 事件绑定
-            this.modal.addEventListener('click', (e) => {
+            // 点击背景关闭
+            this.modal.onclick = (e) => {
                 if (e.target === this.modal) this.close();
-            });
+            };
             
+            // ESC 关闭
             document.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape' && this.modal.style.display === 'flex') {
-                    this.close();
-                }
+                if (e.key === 'Escape') this.close();
             });
-            
-            this.reuseBtn.addEventListener('click', () => this.reuse());
-        }
+        },
         
-        static open(item) {
-            appState.currentModalItem = item;
+        open(item) {
+            AppState.currentModalItem = item;
             
+            // 设置主图 - 直接赋值
             this.imgEl.src = item.image;
+            
+            // 设置提示词
             this.promptEl.textContent = item.prompt;
             
             // 渲染参考图
-            const fragment = document.createDocumentFragment();
-            if (item.inputImages?.length > 0) {
+            this.refsEl.innerHTML = '';
+            if (item.inputImages && item.inputImages.length > 0) {
                 item.inputImages.forEach(imgData => {
-                    const thumb = Utils.createElement('img', {
-                        className: 'ref-thumb',
-                        src: imgData,
-                        onClick: () => window.open(imgData, '_blank')
-                    });
-                    fragment.appendChild(thumb);
+                    const thumb = document.createElement('img');
+                    thumb.className = 'ref-thumb';
+                    thumb.src = imgData;  // 直接赋值
+                    thumb.onclick = () => window.open(imgData, '_blank');
+                    this.refsEl.appendChild(thumb);
                 });
             }
-            this.refsEl.innerHTML = '';
-            this.refsEl.appendChild(fragment);
+            
+            // 绑定复用按钮
+            this.reuseBtn.onclick = () => this.reuse();
             
             this.modal.style.display = 'flex';
-        }
+        },
         
-        static close() {
+        close() {
             this.modal.style.display = 'none';
-            appState.currentModalItem = null;
-        }
+            AppState.currentModalItem = null;
+        },
         
-        static reuse() {
-            const item = appState.currentModalItem;
+        reuse() {
+            const item = AppState.currentModalItem;
             if (!item) return;
             
+            // 复用提示词
             const textarea = document.getElementById('prompt');
             textarea.value = item.prompt;
-            this.adjustTextareaHeight(textarea);
+            textarea.style.height = 'auto';
+            textarea.style.height = textarea.scrollHeight + 'px';
             
-            ImageHandler.setImages(item.inputImages || []);
+            // 复用参考图
+            if (item.inputImages && item.inputImages.length > 0) {
+                ImageHandler.setImages(item.inputImages);
+            } else {
+                ImageHandler.clear();
+            }
             
             this.close();
             textarea.focus();
         }
-        
-        static adjustTextareaHeight(textarea) {
-            textarea.style.height = 'auto';
-            textarea.style.height = textarea.scrollHeight + 'px';
-        }
-    }
+    };
     
     // ============================================
     // 生成请求模块
     // ============================================
-    class Generator {
-        constructor() {
+    const Generator = {
+        sendBtn: null,
+        textarea: null,
+        
+        init() {
             this.sendBtn = document.getElementById('send-btn');
             this.textarea = document.getElementById('prompt');
-            this.isGenerating = false;
             
-            this.bindEvents();
-        }
-        
-        bindEvents() {
-            this.sendBtn.addEventListener('click', () => this.generate());
+            this.sendBtn.onclick = () => this.generate();
             
             // 输入框自动高度
             this.textarea.addEventListener('input', () => {
-                ModalManager.adjustTextareaHeight(this.textarea);
+                this.textarea.style.height = 'auto';
+                this.textarea.style.height = this.textarea.scrollHeight + 'px';
             });
             
-            // 回车发送
+            // 回车发送（Shift+Enter 换行）
             this.textarea.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter' && !e.shiftKey && !this.isGenerating) {
+                if (e.key === 'Enter' && !e.shiftKey) {
                     e.preventDefault();
                     this.generate();
                 }
             });
-        }
+        },
         
         setLoading(loading) {
-            this.isGenerating = loading;
-            this.sendBtn.classList.toggle('loading', loading);
-            this.sendBtn.disabled = loading;
-        }
+            if (loading) {
+                this.sendBtn.classList.add('loading');
+                this.sendBtn.disabled = true;
+            } else {
+                this.sendBtn.classList.remove('loading');
+                this.sendBtn.disabled = false;
+            }
+        },
         
         async generate() {
             const prompt = this.textarea.value.trim();
             if (!prompt) {
                 alert('请输入提示词');
-                this.textarea.focus();
                 return;
             }
             
@@ -663,29 +595,30 @@
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({
                         prompt: prompt,
-                        images: appState.currentImages
+                        images: AppState.currentImages
                     })
                 });
                 
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-                
                 const data = await response.json();
                 
-                if (!data.success || !data.image?.startsWith('data:image')) {
-                    throw new Error(data.message || '生成失败：返回的图片数据无效');
+                if (!response.ok || !data.success) {
+                    throw new Error(data.message || '生成失败');
+                }
+                
+                // 验证返回的图片数据
+                if (!data.image || !data.image.startsWith('data:image')) {
+                    throw new Error('返回的图片数据无效');
                 }
                 
                 // 保存到数据库
                 await Database.save({
                     prompt: prompt,
                     image: data.image,
-                    inputImages: [...appState.currentImages]
+                    inputImages: [...AppState.currentImages]
                 });
                 
                 // 刷新画廊
-                await galleryManager.load();
+                await GalleryManager.load();
                 
                 // 清空输入
                 this.textarea.value = '';
@@ -694,158 +627,123 @@
                 
             } catch (err) {
                 console.error('生成失败:', err);
-                alert(`生成失败: ${err.message}`);
+                alert('生成失败: ' + err.message);
             } finally {
                 this.setLoading(false);
             }
         }
-    }
+    };
     
     // ============================================
     // 认证模块
     // ============================================
-    class Auth {
-        static async check() {
+    const Auth = {
+        async check() {
             try {
                 const res = await fetch('/api/check-auth');
                 const data = await res.json();
-                return data.authenticated === true;
+                return data.authenticated;
             } catch {
                 return false;
             }
-        }
+        },
         
-        static async login(password) {
-            try {
-                const res = await fetch('/api/login', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ password })
-                });
-                const data = await res.json();
-                return data.success === true;
-            } catch {
-                return false;
-            }
-        }
+        async login(password) {
+            const res = await fetch('/api/login', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ password })
+            });
+            const data = await res.json();
+            return data.success;
+        },
         
-        static unlock() {
+        unlock() {
             document.getElementById('login-overlay').style.display = 'none';
             const app = document.getElementById('app');
             app.style.filter = 'none';
             app.style.pointerEvents = 'all';
         }
-    }
+    };
     
     // ============================================
     // 拖拽上传模块
     // ============================================
-    class DragDrop {
-        constructor(dropZone) {
-            this.dropZone = document.getElementById(dropZone);
-            this.dragCounter = 0;
-            this.bindEvents();
-        }
+    const DragDrop = {
+        dropZone: null,
         
-        bindEvents() {
-            const events = ['dragenter', 'dragover', 'dragleave', 'drop'];
+        init() {
+            this.dropZone = document.getElementById('drop-zone');
             
-            events.forEach(event => {
-                this.dropZone.addEventListener(event, this.preventDefaults);
+            // 阻止默认行为
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(event => {
+                this.dropZone.addEventListener(event, (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                });
             });
             
-            this.dropZone.addEventListener('dragenter', () => {
-                this.dragCounter++;
-                this.highlight();
+            // 拖入高亮
+            ['dragenter', 'dragover'].forEach(event => {
+                this.dropZone.addEventListener(event, () => {
+                    this.dropZone.style.borderColor = 'var(--accent-color)';
+                    this.dropZone.style.background = 'rgba(59, 130, 246, 0.1)';
+                });
             });
             
-            this.dropZone.addEventListener('dragleave', () => {
-                this.dragCounter--;
-                if (this.dragCounter === 0) {
-                    this.unhighlight();
-                }
+            // 拖出恢复
+            ['dragleave', 'drop'].forEach(event => {
+                this.dropZone.addEventListener(event, () => {
+                    this.dropZone.style.borderColor = '';
+                    this.dropZone.style.background = '';
+                });
             });
             
+            // 放下处理
             this.dropZone.addEventListener('drop', async (e) => {
-                this.dragCounter = 0;
-                this.unhighlight();
-                
                 const files = e.dataTransfer.files;
                 if (files.length > 0) {
                     await ImageHandler.processFiles(files);
                 }
             });
         }
-        
-        preventDefaults(e) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        
-        highlight() {
-            this.dropZone.style.borderColor = 'var(--accent-color)';
-            this.dropZone.style.background = 'rgba(59, 130, 246, 0.1)';
-        }
-        
-        unhighlight() {
-            this.dropZone.style.borderColor = '';
-            this.dropZone.style.background = '';
-        }
-    }
+    };
     
     // ============================================
     // 文件选择模块
     // ============================================
-    class FileSelector {
-        constructor() {
+    const FileSelector = {
+        input: null,
+        btn: null,
+        
+        init() {
             this.input = document.getElementById('file-input');
             this.btn = document.getElementById('upload-btn');
             
-            this.bindEvents();
-        }
-        
-        bindEvents() {
-            this.btn.addEventListener('click', () => this.input.click());
+            this.btn.onclick = () => this.input.click();
             
-            this.input.addEventListener('change', async () => {
+            this.input.onchange = async () => {
                 if (this.input.files.length > 0) {
                     await ImageHandler.processFiles(this.input.files);
                 }
-                this.input.value = '';
-            });
+                this.input.value = ''; // 重置以便重复选择
+            };
         }
-    }
-    
-    // ============================================
-    // 全局实例
-    // ============================================
-    let previewManager, galleryManager, generator, dragDrop, fileSelector;
+    };
     
     // ============================================
-    // 全局函数
+    // 全局函数（供 HTML onclick 调用）
     // ============================================
     async function doLogin() {
-        const pwd = document.getElementById('pwd').value.trim();
-        if (!pwd) {
-            document.getElementById('pwd').focus();
-            return;
-        }
-        
-        const button = event.target;
-        button.disabled = true;
+        const pwd = document.getElementById('pwd').value;
+        if (!pwd) return;
         
-        try {
-            const success = await Auth.login(pwd);
-            if (success) {
-                Auth.unlock();
-                await galleryManager.load();
-            } else {
-                alert('密码错误');
-                document.getElementById('pwd').value = '';
-                document.getElementById('pwd').focus();
-            }
-        } finally {
-            button.disabled = false;
+        const success = await Auth.login(pwd);
+        if (success) {
+            Auth.unlock();
+            await GalleryManager.load();
+        } else {
+            alert('密码错误');
         }
     }
     
@@ -862,36 +760,28 @@
             await Database.init();
             
             // 初始化各模块
-            previewManager = new PreviewManager();
-            galleryManager = new GalleryManager();
+            PreviewManager.init();
+            GalleryManager.init();
             ModalManager.init();
-            generator = new Generator();
-            dragDrop = new DragDrop('drop-zone');
-            fileSelector = new FileSelector();
+            Generator.init();
+            DragDrop.init();
+            FileSelector.init();
             
             // 检查认证状态
             const isAuth = await Auth.check();
             if (isAuth) {
                 Auth.unlock();
-                await galleryManager.load();
-            } else {
-                // 聚焦到密码输入框
-                document.getElementById('pwd').focus();
+                await GalleryManager.load();
             }
             
             console.log('App initialized successfully');
         } catch (err) {
             console.error('App initialization failed:', err);
-            alert('应用初始化失败，请刷新页面重试');
         }
     }
     
     // 启动应用
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initApp);
-    } else {
-        initApp();
-    }
+    document.addEventListener('DOMContentLoaded', initApp);
     </script>
 </body>
 </html>