banber

Running

App Files Files Community

486CHD commited on Dec 1, 2025

Commit

5a75e2c

verified ·

1 Parent(s): baf9c6e

Upload 2 files

Browse files

Files changed (2) hide show

index.html +84 -13
style.css +312 -833

index.html CHANGED Viewed

@@ -5,8 +5,79 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Banana Pro AI</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <!-- 登录界面 -->
     <div id="login-overlay">
@@ -20,19 +91,7 @@
     <!-- 主应用 -->
     <div class="app-container" id="app" style="filter: blur(10px); pointer-events: none;">
-        <header>
-            <div>
-                <h2>创意画板</h2>
-                <div style="font-size: 12px; color: var(--text-sub);" id="status-bar">Ready</div>
-            </div>
-        </header>
-        <!-- 历史画廊 -->
-        <div class="history-container">
-            <div class="grid-layout" id="gallery"></div>
-        </div>
-        <!-- 底部输入与预览组合区 -->
         <div class="input-section glass-panel" id="drop-zone">
             <!-- 上部分：预览条 -->
             <div class="preview-bar" id="preview-bar"></div>
@@ -48,6 +107,18 @@
             </div>
         </div>
         <input type="file" id="file-input" multiple accept="image/*" hidden>
     </div>

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Banana Pro AI</title>
     <link rel="stylesheet" href="style.css">
+    <style>
+        /* 顶部固定布局 */
+        .input-section {
+            position: fixed !important;
+            top: 0 !important;
+            bottom: auto !important;
+            left: 0 !important;
+            right: 0 !important;
+            transform: none !important;
+            width: 100% !important;
+            max-width: 100% !important;
+            border-radius: 0 !important;
+            z-index: 1000 !important;
+            box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
+        }
+        header {
+            margin-top: 80px; /* 为输入区留空间 */
+        }
+        .history-container {
+            padding-bottom: 20px !important;
+        }
+        /* 调整输入区内部布局 */
+        .control-bar {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 12px 20px !important;
+        }
+        .preview-bar {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+        .preview-bar.visible {
+            padding: 12px 20px;
+        }
+        /* 动态调整header间距 */
+        .has-preview header {
+            margin-top: 180px;
+        }
+        @media (max-width: 768px) {
+            header {
+                margin-top: 70px;
+            }
+            .has-preview header {
+                margin-top: 150px;
+            }
+        }
+    </style>
 </head>
 <body>
+    <!-- 在预览栏显示时添加 has-preview 类 -->
+    <script>
+        // 监听预览栏变化
+        const observePreviewBar = () => {
+            const previewBar = document.getElementById('preview-bar');
+            const observer = new MutationObserver(() => {
+                if (previewBar.classList.contains('visible')) {
+                    document.body.classList.add('has-preview');
+                } else {
+                    document.body.classList.remove('has-preview');
+                }
+            });
+            observer.observe(previewBar, { attributes: true, attributeFilter: ['class'] });
+        };
+        document.addEventListener('DOMContentLoaded', observePreviewBar);
+    </script>
     <!-- 登录界面 -->
     <div id="login-overlay">
     <!-- 主应用 -->
     <div class="app-container" id="app" style="filter: blur(10px); pointer-events: none;">
+        <!-- 顶部固定输入区 -->
         <div class="input-section glass-panel" id="drop-zone">
             <!-- 上部分：预览条 -->
             <div class="preview-bar" id="preview-bar"></div>
             </div>
         </div>
+        <header>
+            <div>
+                <h2>创意画板</h2>
+                <div style="font-size: 12px; color: var(--text-sub);" id="status-bar">Ready</div>
+            </div>
+        </header>
+        <!-- 历史画廊 -->
+        <div class="history-container">
+            <div class="grid-layout" id="gallery"></div>
+        </div>
         <input type="file" id="file-input" multiple accept="image/*" hidden>
     </div>

style.css CHANGED Viewed

@@ -1,845 +1,324 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Banana Pro AI</title>
-    <link rel="stylesheet" href="style.css">
-    <style>
-        /* 仅添加需要覆盖的样式 */
-        .input-section {
-            bottom: 60px !important;
-        }
-        .history-container {
-            padding-bottom: 220px !important;
-        }
-        @media (max-width: 768px) {
-            .input-section {
-                bottom: 0 !important;
-            }
-            .history-container {
-                padding-bottom: 160px !important;
-            }
-        }
-    </style>
-</head>
-<body>
-    <!-- 登录界面 -->
-    <div id="login-overlay">
-        <div class="login-card glass-panel">
-            <h1 style="font-size: 2rem;">🍌</h1>
-            <h3 style="margin: 10px 0; color: #cbd5e1;">Banana Pro</h3>
-            <input type="password" id="pwd" placeholder="Password" onkeypress="if(event.key==='Enter')doLogin()">
-            <button class="btn-3d" onclick="doLogin()" style="width: 100%; padding: 10px;">Unlock</button>
-        </div>
-    </div>
-    <!-- 主应用 -->
-    <div class="app-container" id="app" style="filter: blur(10px); pointer-events: none;">
-        <header>
-            <div>
-                <h2>创意画板</h2>
-                <div style="font-size: 12px; color: var(--text-sub);" id="status-bar">Ready</div>
-            </div>
-        </header>
-        <!-- 历史画廊 -->
-        <div class="history-container">
-            <div class="grid-layout" id="gallery"></div>
-        </div>
-        <!-- 底部输入与预览组合区 -->
-        <div class="input-section glass-panel" id="drop-zone">
-            <!-- 上部分：预览条 -->
-            <div class="preview-bar" id="preview-bar"></div>
-            <!-- 下部分：操作栏 -->
-            <div class="control-bar">
-                <button class="upload-trigger" id="upload-btn" title="上传参考图">📷</button>
-                <textarea id="prompt" class="main-input" rows="1" placeholder="描述画面... (支持拖拽图片)"></textarea>
-                <button class="btn-3d send-btn" id="send-btn">
-                    <span>生成</span>
-                    <div class="loader"></div>
-                </button>
-            </div>
-        </div>
-        <input type="file" id="file-input" multiple accept="image/*" hidden>
-    </div>
-    <!-- 详情弹窗 -->
-    <div class="modal" id="modal">
-        <div class="modal-content glass-panel">
-            <button class="close-modal" onclick="closeModal()">×</button>
-            <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>
-    </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;
-        }
-    };
-    // ============================================
-    // IndexedDB 模块
-    // ============================================
-    class Database {
-        static async init() {
-            return new Promise((resolve, reject) => {
-                const request = indexedDB.open(CONFIG.DB_NAME, CONFIG.DB_VERSION);
-                request.onerror = () => reject(new Error('数据库打开失败'));
-                request.onsuccess = () => {
-                    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, {
-                            keyPath: 'id',
-                            autoIncrement: true
-                        });
-                        store.createIndex('timestamp', 'timestamp', { unique: false });
-                    }
-                };
-            });
-        }
-        static async transaction(storeName, mode, operation) {
-            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('事务执行失败'));
-                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,
-                    timestamp: Date.now()
-                };
-                return store.add(record);
-            });
-        }
-        static async getAll() {
-            return new Promise((resolve, reject) => {
-                const tx = appState.db.transaction([CONFIG.STORE_NAME], 'readonly');
-                const store = tx.objectStore(CONFIG.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('读取数据失败'));
-            });
-        }
-        static async delete(id) {
-            return this.transaction(CONFIG.STORE_NAME, 'readwrite', (store) => {
-                return store.delete(id);
-            });
-        }
-        static 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 request = store.get(id);
-                request.onsuccess = () => resolve(request.result);
-                request.onerror = () => reject(new Error('获取数据失败'));
-            });
-        }
     }
-    // ============================================
-    // 图片处理模块
-    // ============================================
-    class ImageHandler {
-        static fileToBase64(file) {
-            return new Promise((resolve, reject) => {
-                const reader = new FileReader();
-                reader.onload = () => resolve(reader.result);
-                reader.onerror = reject;
-                reader.readAsDataURL(file);
-            });
-        }
-        static async processFiles(files) {
-            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} 张图片`);
-                    break;
-                }
-                promises.push(this.fileToBase64(file));
-            }
-            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');
-        }
-        static clear() {
-            appState.currentImages = [];
-            appState.emit('imagesChanged');
-        }
-        static setImages(images) {
-            appState.currentImages = images ? [...images] : [];
-            appState.emit('imagesChanged');
-        }
-    }
-    // ============================================
-    // UI组件基类
-    // ============================================
-    class Component {
-        constructor(container) {
-            this.container = typeof container === 'string'
-                ? document.getElementById(container)
-                : container;
-        }
-        render() {
-            throw new Error('render method must be implemented');
-        }
-    }
-    // ============================================
-    // 预览条管理模块
-    // ============================================
-    class PreviewManager extends Component {
-        constructor() {
-            super('preview-bar');
-            this.uploadBtn = document.getElementById('upload-btn');
-            this.statusBar = document.getElementById('status-bar');
-            // 监听图片变化
-            appState.on('imagesChanged', () => this.render());
-        }
-        render() {
-            const images = appState.currentImages;
-            // 使用 DocumentFragment 减少重排
-            const fragment = document.createDocumentFragment();
-            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} 张图片`;
-            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);
-            });
-            this.container.innerHTML = '';
-            this.container.appendChild(fragment);
-        }
-    }
-    // ============================================
-    // 画廊管理模块
-    // ============================================
-    class GalleryManager extends Component {
-        constructor() {
-            super('gallery');
-            this.renderDebounced = Utils.debounce(() => this.render(), 100);
-        }
-        async load() {
-            try {
-                appState.galleryData = await Database.getAll();
-                this.render();
-            } catch (err) {
-                console.error('加载画廊失败:', err);
-                alert('加载画廊失败，请刷新页面重试');
-            }
-        }
-        render() {
-            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>
-                        <div>暂无作品，开始创作吧！</div>
-                    </div>
-                `;
-                return;
-            }
-            const fragment = document.createDocumentFragment();
-            appState.galleryData.forEach(item => {
-                fragment.appendChild(this.createCard(item));
-            });
-            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)
-            });
-            // 参考图标记
-            if (item.inputImages?.length > 0) {
-                card.appendChild(Utils.createElement('div', {
-                    className: 'item-badge',
-                    textContent: `📎 ${item.inputImages.length}`
-                }));
-            }
-            // 主图片
-            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);
-            // 操作按钮
-            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);
-            return card;
-        }
-        downloadImage(item) {
-            const link = Utils.createElement('a', {
-                href: item.image,
-                download: `banana-pro-${item.id}-${Date.now()}.png`
-            });
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-        }
-        async deleteItem(id) {
-            if (!confirm('确定要删除这张图片吗？')) return;
-            try {
-                await Database.delete(id);
-                await this.load();
-            } catch (err) {
-                console.error('删除失败:', err);
-                alert('删除失败，请重试');
-            }
-        }
-    }
-    // ============================================
-    // 弹窗管理模块
-    // ============================================
-    class ModalManager {
-        static 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) => {
-                if (e.target === this.modal) this.close();
-            });
-            document.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape' && this.modal.style.display === 'flex') {
-                    this.close();
-                }
-            });
-            this.reuseBtn.addEventListener('click', () => this.reuse());
-        }
-        static open(item) {
-            appState.currentModalItem = item;
-            this.imgEl.src = item.image;
-            this.promptEl.textContent = item.prompt;
-            // 渲染参考图
-            const fragment = document.createDocumentFragment();
-            if (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);
-                });
-            }
-            this.refsEl.innerHTML = '';
-            this.refsEl.appendChild(fragment);
-            this.modal.style.display = 'flex';
-        }
-        static close() {
-            this.modal.style.display = 'none';
-            appState.currentModalItem = null;
-        }
-        static reuse() {
-            const item = appState.currentModalItem;
-            if (!item) return;
-            const textarea = document.getElementById('prompt');
-            textarea.value = item.prompt;
-            this.adjustTextareaHeight(textarea);
-            ImageHandler.setImages(item.inputImages || []);
-            this.close();
-            textarea.focus();
-        }
-        static adjustTextareaHeight(textarea) {
-            textarea.style.height = 'auto';
-            textarea.style.height = textarea.scrollHeight + 'px';
-        }
-    }
-    // ============================================
-    // 生成请求模块
-    // ============================================
-    class Generator {
-        constructor() {
-            this.sendBtn = document.getElementById('send-btn');
-            this.textarea = document.getElementById('prompt');
-            this.isGenerating = false;
-            this.bindEvents();
-        }
-        bindEvents() {
-            this.sendBtn.addEventListener('click', () => this.generate());
-            // 输入框自动高度
-            this.textarea.addEventListener('input', () => {
-                ModalManager.adjustTextareaHeight(this.textarea);
-            });
-            // 回车发送
-            this.textarea.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter' && !e.shiftKey && !this.isGenerating) {
-                    e.preventDefault();
-                    this.generate();
-                }
-            });
-        }
-        setLoading(loading) {
-            this.isGenerating = loading;
-            this.sendBtn.classList.toggle('loading', loading);
-            this.sendBtn.disabled = loading;
-        }
-        async generate() {
-            const prompt = this.textarea.value.trim();
-            if (!prompt) {
-                alert('请输入提示词');
-                this.textarea.focus();
-                return;
-            }
-            this.setLoading(true);
-            try {
-                const response = await fetch('/api/generate', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        prompt: prompt,
-                        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 || '生成失败：返回的图片数据无效');
-                }
-                // 保存到数据库
-                await Database.save({
-                    prompt: prompt,
-                    image: data.image,
-                    inputImages: [...appState.currentImages]
-                });
-                // 刷新画廊
-                await galleryManager.load();
-                // 清空输入
-                this.textarea.value = '';
-                this.textarea.style.height = 'auto';
-                ImageHandler.clear();
-            } catch (err) {
-                console.error('生成失败:', err);
-                alert(`生成失败: ${err.message}`);
-            } finally {
-                this.setLoading(false);
-            }
-        }
-    }
-    // ============================================
-    // 认证模块
-    // ============================================
-    class Auth {
-        static async check() {
-            try {
-                const res = await fetch('/api/check-auth');
-                const data = await res.json();
-                return data.authenticated === true;
-            } 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;
-            }
-        }
-        static 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();
-        }
-        bindEvents() {
-            const events = ['dragenter', 'dragover', 'dragleave', 'drop'];
-            events.forEach(event => {
-                this.dropZone.addEventListener(event, this.preventDefaults);
-            });
-            this.dropZone.addEventListener('dragenter', () => {
-                this.dragCounter++;
-                this.highlight();
-            });
-            this.dropZone.addEventListener('dragleave', () => {
-                this.dragCounter--;
-                if (this.dragCounter === 0) {
-                    this.unhighlight();
-                }
-            });
-            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() {
-            this.input = document.getElementById('file-input');
-            this.btn = document.getElementById('upload-btn');
-            this.bindEvents();
-        }
-        bindEvents() {
-            this.btn.addEventListener('click', () => this.input.click());
-            this.input.addEventListener('change', async () => {
-                if (this.input.files.length > 0) {
-                    await ImageHandler.processFiles(this.input.files);
-                }
-                this.input.value = '';
-            });
-        }
-    }
-    // ============================================
-    // 全局实例
-    // ============================================
-    let previewManager, galleryManager, generator, dragDrop, fileSelector;
-    // ============================================
-    // 全局函数
-    // ============================================
-    async function doLogin() {
-        const pwd = document.getElementById('pwd').value.trim();
-        if (!pwd) {
-            document.getElementById('pwd').focus();
-            return;
-        }
-        const button = event.target;
-        button.disabled = true;
-        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;
-        }
     }
-    function closeModal() {
-        ModalManager.close();
     }
-    // ============================================
-    // 应用初始化
-    // ============================================
-    async function initApp() {
-        try {
-            // 初始化数据库
-            await Database.init();
-            // 初始化各模块
-            previewManager = new PreviewManager();
-            galleryManager = new GalleryManager();
-            ModalManager.init();
-            generator = new Generator();
-            dragDrop = new DragDrop('drop-zone');
-            fileSelector = new FileSelector();
-            // 检查认证状态
-            const isAuth = await Auth.check();
-            if (isAuth) {
-                Auth.unlock();
-                await galleryManager.load();
-            } else {
-                // 聚焦到密码输入框
-                document.getElementById('pwd').focus();
-            }
-            console.log('App initialized successfully');
-        } catch (err) {
-            console.error('App initialization failed:', err);
-            alert('应用初始化失败，请刷新页面重试');
-        }
     }
-    // 启动应用
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initApp);
-    } else {
-        initApp();
     }
-    </script>
-</body>
-</html>

+/* style.css */
+:root {
+    --bg-color: #0f172a;
+    --panel-bg: rgba(30, 41, 59, 0.75);
+    --panel-border: rgba(148, 163, 184, 0.15);
+    --accent-color: #3b82f6;
+    --text-main: #f1f5f9;
+    --text-sub: #94a3b8;
+    --btn-shadow: #1e3a8a;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    background: var(--bg-color) radial-gradient(circle at 50% 0%, #1e293b 0%, var(--bg-color) 70%);
+    color: var(--text-main);
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+/* --- 通用组件 --- */
+.glass-panel {
+    background: var(--panel-bg);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid var(--panel-border);
+}
+.btn-3d {
+    background: var(--accent-color);
+    color: white;
+    border: none;
+    border-radius: 12px;
+    font-weight: 600;
+    box-shadow: 0 4px 0 var(--btn-shadow), 0 5px 10px rgba(0,0,0,0.2);
+    transition: transform 0.1s, box-shadow 0.1s;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+.btn-3d:active { transform: translateY(4px); box-shadow: 0 0 0 var(--btn-shadow); }
+.btn-3d:disabled { background: #475569; box-shadow: none; transform: none; opacity: 0.7; }
+/* --- 布局 --- */
+.app-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+header {
+    padding: 15px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+    margin-top: 70px; /* 为顶部固定输入区留空间 */
+    transition: margin-top 0.3s ease;
+}
+header h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.5px; }
+/* 当有预览图时增加顶部间距 */
+body.has-preview header {
+    margin-top: 170px;
+}
+/* --- 历史记录区域 --- */
+.history-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px 20px;
+    padding-bottom: 20px; /* 顶部布局不需要底部留空 */
+}
+.grid-layout {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr); /* 默认两列 */
+    gap: 16px;
+}
+.history-item {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    border-radius: 12px;
+    overflow: hidden;
+    border: 1px solid var(--panel-border);
+    background: rgba(0,0,0,0.2);
+    cursor: pointer;
+}
+.history-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
+.history-item:hover img { transform: scale(1.05); }
+.item-badge {
+    position: absolute;
+    top: 8px; left: 8px;
+    background: rgba(59, 130, 246, 0.9);
+    font-size: 10px; padding: 2px 6px;
+    border-radius: 4px; z-index: 2;
+}
+.item-actions {
+    position: absolute;
+    bottom: 0; right: 0; left: 0;
+    padding: 10px;
+    background: linear-gradient(transparent, rgba(0,0,0,0.8));
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+.history-item:hover .item-actions { opacity: 1; }
+/* 移动端默认显示操作栏 */
+@media (hover: none) { .item-actions { opacity: 1; } }
+.icon-btn {
+    width: 32px; height: 32px;
+    border-radius: 8px;
+    background: rgba(255,255,255,0.15);
+    color: white;
+    border: none;
+    display: flex; align-items: center; justify-content: center;
+    backdrop-filter: blur(4px);
+}
+/* --- 输入区域 (顶部固定设计) --- */
+.input-section {
+    position: fixed; /* 固定在顶部 */
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    border-radius: 0;
+    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
+    z-index: 100;
+    border-bottom: 1px solid var(--panel-border);
+}
+/* 1. 预览层 (位于输入框上方) */
+.preview-bar {
+    padding: 0;
+    max-height: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    background: rgba(15, 23, 42, 0.4);
+    display: flex;
+    gap: 8px;
+    transition: all 0.3s ease;
+    white-space: nowrap;
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
+}
+.preview-bar.visible {
+    padding: 12px 20px;
+    max-height: 100px; /* 展开 */
+}
+.thumb-wrapper {
+    position: relative;
+    width: 64px; height: 64px;
+    flex-shrink: 0;
+    border-radius: 8px;
+    border: 1px solid rgba(255,255,255,0.1);
+    overflow: hidden;
+}
+.thumb-wrapper img { width: 100%; height: 100%; object-fit: cover; }
+.thumb-remove {
+    position: absolute; top: 2px; right: 2px;
+    width: 16px; height: 16px;
+    background: rgba(239,68,68,0.9);
+    border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 12px; cursor: pointer;
+}
+/* 2. 控制层 (按钮+输入框) */
+.control-bar {
+    display: flex;
+    align-items: flex-end;
+    padding: 12px 20px;
+    gap: 10px;
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
+}
+.upload-trigger {
+    width: 44px; height: 44px;
+    border-radius: 12px;
+    background: rgba(255,255,255,0.05);
+    border: 1px dashed rgba(255,255,255,0.3);
+    color: var(--text-sub);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 20px;
+    flex-shrink: 0;
+    transition: all 0.2s;
+}
+.upload-trigger:hover, .upload-trigger.active {
+    background: rgba(59, 130, 246, 0.2);
+    border-color: var(--accent-color);
+    color: var(--accent-color);
+}
+.main-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: white;
+    font-size: 16px;
+    padding: 10px 5px;
+    resize: none;
+    max-height: 120px;
+    outline: none;
+    line-height: 1.5;
+}
+.main-input::placeholder { color: rgba(255,255,255,0.3); }
+.send-btn {
+    height: 44px;
+    padding: 0 20px;
+    font-size: 15px;
+    flex-shrink: 0;
+}
+/* 加载动画 */
+.loader {
+    width: 18px; height: 18px;
+    border: 2px solid rgba(255,255,255,0.3);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    display: none;
+}
+.loading .loader { display: block; }
+.loading span { display: none; }
+@keyframes spin { to { transform: rotate(360deg); } }
+/* --- 弹窗 --- */
+.modal {
+    display: none;
+    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+    background: rgba(0,0,0,0.9);
+    z-index: 1000;
+    justify-content: center; align-items: center;
+    backdrop-filter: blur(5px);
+}
+.modal-content {
+    background: #1e293b;
+    width: 95%; max-width: 1000px; height: 90%;
+    border-radius: 16px;
+    display: flex; flex-direction: column;
+    position: relative;
+    border: 1px solid var(--panel-border);
+}
+.close-modal {
+    position: absolute; top: 15px; right: 15px;
+    width: 36px; height: 36px;
+    border-radius: 50%; background: rgba(0,0,0,0.5);
+    color: white; border: 1px solid rgba(255,255,255,0.2);
+    z-index: 10; font-size: 20px;
+}
+.modal-img-area { flex: 1; display: flex; justify-content: center; align-items: center; background: #000; overflow: hidden; border-radius: 16px 16px 0 0; }
+.modal-img-area img { max-width: 100%; max-height: 100%; object-fit: contain; }
+.modal-footer { padding: 15px; background: #1e293b; border-top: 1px solid var(--panel-border); display: flex; flex-direction: column; gap: 10px; }
+.input-refs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; }
+.ref-thumb { width: 40px; height: 40px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.2); cursor: pointer; }
+.prompt-display { background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px; color: #cbd5e1; font-size: 0.9rem; max-height: 80px; overflow-y: auto; }
+/* --- 手机响应式设计 --- */
+@media (max-width: 768px) {
+    .app-container { padding: 0; }
+    .history-container { padding: 10px; padding-bottom: 10px; }
+    /* 移动端顶部间距调整 */
+    header {
+        margin-top: 60px;
     }
+    body.has-preview header {
+        margin-top: 140px;
     }
+    /* 历史记录一行一个 */
+    .grid-layout {
+        grid-template-columns: 1fr;
+        gap: 20px;
     }
+    /* 输入区样式调整 */
+    .control-bar {
+        padding: 10px;
     }
+    .preview-bar.visible {
+        max-height: 80px;
+        padding: 10px;
     }
+    /* 调整按钮点击区域 */
+    .send-btn { padding: 0 15px; min-width: 80px; }
+    .thumb-wrapper { width: 50px; height: 50px; }
+}
+/* --- 大屏幕优化 --- */
+@media (min-width: 1200px) {
+    .grid-layout {
+        grid-template-columns: repeat(3, 1fr); /* 大屏幕显示三列 */
     }
+}
+/* 登录层 */
+#login-overlay { position: fixed; inset: 0; z-index: 5000; display: flex; justify-content: center; align-items: center; background: #0f172a; }
+.login-card { width: 300px; padding: 30px; text-align: center; }
+.login-card input { width: 100%; padding: 12px; margin: 15px 0; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); color: white; border-radius: 8px; }