[CRITICAL FIX] 修复iPad竖屏抽屉空白与移动端体验优化

核心修复：
- 修复CSS选择器作用域：.left-panel隐藏规则不再影响抽屉内容
- 优化响应式断点：880px断点提升iPad竖屏体验
- 新增快速输入dock：窄屏底部粘性输入栏，支持就地生成
- 增强抽屉交互：智能显隐dock，首访自动引导

技术改进：
- CSS选择器精确化：.app-container > .left-panel避免过度隐藏
- 响应式分层：≤880px抽屉模式，881-1024px双栏，≥1025px桌面
- 触控友好：所有按钮≥44×44pt，回车键支持，悬停效果优化
- 数据同步：dock输入自动同步主界面并触发生成

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

static/script.js

@@ -1792,3 +1792,95 @@ function syncToMainPrompt() {
         mainPrompt.value = quickPrompt.value;
     }
 }
+
+// Quick Dock functionality for narrow screens
+function generateFromDock() {
+    const dockPrompt = document.getElementById('dockPrompt');
+    const mainPrompt = document.getElementById('prompt');
+
+    if (!dockPrompt.value.trim()) {
+        showToast('请输入提示词', 'error');
+        return;
+    }
+
+    // Copy dock prompt to main prompt
+    mainPrompt.value = dockPrompt.value;
+
+    // Switch to current results tab
+    switchTab('current');
+
+    // Trigger generation
+    generateEdit();
+
+    // Clear dock input after generation starts
+    setTimeout(() => {
+        dockPrompt.value = '';
+    }, 500);
+}
+
+// Enhanced drawer functions with dock visibility control
+function toggleDrawer() {
+    const drawer = document.getElementById('drawer');
+    const overlay = document.querySelector('.drawer-overlay');
+    const quickDock = document.querySelector('.quick-dock');
+
+    if (drawer.classList.contains('open')) {
+        closeDrawer();
+    } else {
+        openDrawer();
+    }
+}
+
+function openDrawer() {
+    const drawer = document.getElementById('drawer');
+    const overlay = document.querySelector('.drawer-overlay');
+    const quickDock = document.querySelector('.quick-dock');
+
+    drawer.classList.add('open');
+    overlay.classList.add('show');
+    document.body.style.overflow = 'hidden';
+
+    // Hide quick dock when drawer is open
+    if (quickDock) {
+        quickDock.style.display = 'none';
+    }
+}
+
+function closeDrawer() {
+    const drawer = document.getElementById('drawer');
+    const overlay = document.querySelector('.drawer-overlay');
+    const quickDock = document.querySelector('.quick-dock');
+
+    drawer.classList.remove('open');
+    overlay.classList.remove('show');
+    document.body.style.overflow = '';
+
+    // Restore quick dock visibility on narrow screens
+    if (quickDock && window.innerWidth <= 880) {
+        quickDock.style.display = 'flex';
+    }
+}
+
+// Auto-show drawer on first visit for narrow screens
+document.addEventListener('DOMContentLoaded', () => {
+    if (window.innerWidth <= 880 && !localStorage.getItem('seenDrawer')) {
+        setTimeout(() => {
+            openDrawer();
+            localStorage.setItem('seenDrawer', '1');
+            showToast('👈 在侧栏中可以调整更多参数', 'info', 3000);
+        }, 1000);
+    }
+});
+
+// Handle Enter key in dock input
+document.addEventListener('DOMContentLoaded', () => {
+    const dockPrompt = document.getElementById('dockPrompt');
+    if (dockPrompt) {
+        dockPrompt.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                generateFromDock();
+            }
+        });
+    }
+});

static/style.css

@@ -968,17 +968,24 @@ label, .meta {
 /* Container query fallback using viewport queries */
 
 /* Enhanced breakpoints for different screen sizes */
-@media (max-width: 1024px) {
+/* Use 880px breakpoint for better iPad portrait support */
+@media (max-width: 880px) {
     .app-container {
         grid-template-columns: 1fr;
         gap: 0; /* Remove gap in mobile */
         padding: var(--spacing-4);
     }
 
-    .left-panel {
+    /* Only hide main layout left panel, not drawer content */
+    .app-container > .left-panel {
         display: none;
     }
 
+    /* Ensure drawer left panel stays visible */
+    .drawer .left-panel {
+        display: flex;
+    }
+
     .sidebar-toggle {
         display: flex;
     }
@@ -988,6 +995,14 @@ label, .meta {
     }
 }
 
+/* iPad and medium screens keep dual-pane layout */
+@media (min-width: 881px) and (max-width: 1024px) {
+    .app-container {
+        grid-template-columns: minmax(280px, 350px) 1fr;
+        gap: clamp(12px, 1.5vw, 20px);
+    }
+}
+
 @media (min-width: 1025px) and (max-width: 1366px) {
     .app-container {
         gap: clamp(16px, 1.5vw, 24px);
@@ -1801,6 +1816,71 @@ select:focus-visible {
     outline-offset: -2px;
 }
 
+/* Quick Dock for narrow screens */
+.quick-dock {
+    display: none;
+    position: sticky;
+    bottom: 0;
+    background: color-mix(in oklab, var(--surface) 92%, transparent);
+    backdrop-filter: blur(16px) saturate(1.2);
+    -webkit-backdrop-filter: blur(16px) saturate(1.2);
+    border-top: 1px solid var(--border-light);
+    padding: var(--spacing-3) var(--spacing-4);
+    gap: var(--spacing-3);
+    align-items: stretch;
+    z-index: 20;
+}
+
+.quick-dock input {
+    flex: 1;
+    min-height: 44px;
+    padding: var(--spacing-3);
+    border: 1px solid var(--border-light);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+    color: var(--text-primary);
+    font-size: 16px;
+    transition: all 0.2s ease;
+}
+
+.quick-dock input:focus {
+    outline: none;
+    border-color: var(--brand-primary);
+    box-shadow: 0 0 0 3px var(--brand-bg);
+}
+
+.dock-generate-btn {
+    min-height: 44px;
+    min-width: 80px;
+    padding: var(--spacing-3) var(--spacing-4);
+    background: var(--brand-primary);
+    color: white;
+    border: none;
+    border-radius: var(--radius-lg);
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+}
+
+.dock-generate-btn:hover {
+    background: var(--brand-hover);
+    transform: translateY(-1px);
+}
+
+/* Show quick dock only on narrow screens */
+@media (max-width: 880px) {
+    .quick-dock {
+        display: flex;
+    }
+
+    /* Hide dock when drawer is open */
+    .drawer.open ~ .app-container .quick-dock {
+        display: none;
+    }
+}
+
 /* ============================= */
 /* Apple HIG Enhanced Progress & Notifications */
 /* ============================= */

templates/index.html

@@ -215,6 +215,14 @@
                     </div>
                 </div>
             </div>
+
+            <!-- Quick Dock for narrow screens -->
+            <div class="quick-dock">
+                <input id="dockPrompt" placeholder="快速描述想要的图像...">
+                <button class="dock-generate-btn" onclick="generateFromDock()" aria-label="快速生成">
+                    生成
+                </button>
+            </div>
         </div>
     </div>