[TECHNICAL DEBT FIX] 核心架构优化 - 消除DOM重复与PWA增强

基于Linus Torvalds的"好品味"原则，彻底重构了用户界面架构：

核心改进：
- 消除DOM重复ID问题：重写HTML结构，采用单一数据源设计
- 简化抽屉架构：移除重复表单，抽屉仅作移动端快速入口
- PWA配置优化：移除方向限制，支持iPad横屏工作流
- 无障碍增强：添加ARIA标签、skip-link、语义化角色
- 性能优化：所有图片添加懒加载和异步解码

架构原则：
- "消除特殊情况" - 不再维护两套相同表单
- "简洁执念" - 单一数据源，状态同步简化
- "实用主义" - 移动端引导到桌面完整体验

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

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

static/manifest.webmanifest

@@ -5,14 +5,25 @@
   "start_url": "/",
   "display": "standalone",
   "background_color": "#0b0b0c",
-  "theme_color": "#007AFF",
-  "orientation": "portrait-primary",
+  "theme_color": "#7c3aed",
   "icons": [
     {
       "src": "/static/app-icon.svg",
       "sizes": "180x180",
       "type": "image/svg+xml",
-      "purpose": "any maskable"
+      "purpose": "any"
+    },
+    {
+      "src": "/static/app-icon.svg",
+      "sizes": "192x192",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    },
+    {
+      "src": "/static/app-icon.svg",
+      "sizes": "512x512",
+      "type": "image/svg+xml",
+      "purpose": "maskable"
     }
   ]
 }

static/script.js

@@ -436,7 +436,7 @@ function addImagePreview(src, index) {
     previewItem.innerHTML = `
         <img id="${imageId}" src="${src}" alt="Upload ${index + 1}"
              onclick="openImageModal('${imageId}', '${src}', 'Uploaded Image ${index + 1}', 'Input Image')"
-             style="cursor: pointer;">
+             loading="lazy" decoding="async" style="cursor: pointer;">
         <button class="remove-btn" onclick="removeImage(${index})">×</button>
         <div class="image-upload-status" style="display: none;">
             <div class="upload-progress-mini">
@@ -1036,7 +1036,7 @@ function displayCurrentResults(response) {
         const item = document.createElement('div');
         item.className = 'generation-item';
         item.innerHTML = `
-            <img id="${imageId}" src="${imgSrc}" alt="Result ${index + 1}">
+            <img id="${imageId}" src="${imgSrc}" alt="Result ${index + 1}" loading="lazy" decoding="async">
             <button class="use-as-input-btn" onclick="useAsInput('${imageId}', '${imgSrc}')" title="作为输入">
                 ↻ 作为输入
             </button>
@@ -1077,7 +1077,7 @@ function displayHistory() {
                 const item = document.createElement('div');
                 item.className = 'generation-item';
                 item.innerHTML = `
-                    <img id="${imageId}" src="${imgSrc}" alt="Generation"
+                    <img id="${imageId}" src="${imgSrc}" alt="Generation" loading="lazy" decoding="async"
                          onclick="openImageModal('${imageId}', '${imgSrc}', '${generation.prompt.replace(/'/g, "\\'")}', '${new Date(generation.timestamp).toLocaleString()}')">
                     <button class="use-as-input-btn" onclick="useAsInput('${imageId}', '${imgSrc}')" title="Use as input">
                         ↻ 作为输入
@@ -1771,3 +1771,12 @@ function initializeAccessibility() {
         buttonObserver.observe(generateBtn, { attributes: true });
     }
 }
+
+// Sync quick prompt to main prompt
+function syncToMainPrompt() {
+    const quickPrompt = document.getElementById('quickPrompt');
+    const mainPrompt = document.getElementById('prompt');
+    if (quickPrompt && mainPrompt) {
+        mainPrompt.value = quickPrompt.value;
+    }
+}

templates/index.html

@@ -4,13 +4,19 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
     <link rel="apple-touch-icon" href="/static/app-icon.svg">
+    <link rel="icon" type="image/svg+xml" href="/static/app-icon.svg">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
+    <meta name="theme-color" content="#7c3aed" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="#8b5cf6" media="(prefers-color-scheme: dark)">
     <link rel="manifest" href="/static/manifest.webmanifest">
     <title>SeedDream v4 - AI图像生成与编辑器</title>
     <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
+    <!-- Skip to main content for accessibility -->
+    <a href="#main-content" class="skip-link">跳转到主要内容</a>
+
     <!-- Sidebar Toggle Button (for narrow screens) -->
     <button class="sidebar-toggle" onclick="toggleDrawer()" aria-label="打开参数面板">
         ☰
@@ -19,150 +25,42 @@
     <!-- Drawer Overlay -->
     <div class="drawer-overlay" onclick="closeDrawer()"></div>
 
-    <!-- Drawer (mobile sidebar) -->
+    <!-- Drawer (mobile sidebar) - Simplified -->
     <div class="drawer" id="drawer">
         <div class="left-panel drawer-content">
             <div class="controls-section">
-                <div class="card collapsed" id="apiConfigCard">
-                    <div class="card-header">
-                        <h2>API配置</h2>
-                        <button type="button" class="settings-toggle-btn" onclick="toggleApiConfig()"
-                                aria-expanded="false" aria-controls="apiConfigContent" title="展开/收起API配置">
-                            <span class="toggle-icon">▼</span>
-                        </button>
-                    </div>
-                    <div class="settings-content" id="apiConfigContent">
-                    <div class="settings-grid">
-                        <div class="form-group">
-                            <label for="apiKey">FAL API密钥</label>
-                            <div class="api-key-input-group">
-                                <input type="password" id="apiKey" placeholder="请输入您的FAL API密钥" />
-                                <button type="button" id="toggleApiKey" class="btn-icon" title="显示/隐藏密钥" aria-label="显示/隐藏密钥">👁</button>
-                                <button type="button" id="testApiKey" class="btn-test" title="测试连接">测试</button>
-                            </div>
-                            <small class="help-text">从 <a href="https://fal.ai" target="_blank">fal.ai</a> 获取您的API密钥</small>
-                            <div id="apiKeyStatus" class="api-key-status"></div>
-                        </div>
-                        <div class="form-group">
-                            <label for="modelSelect">模型选择</label>
-                            <select id="modelSelect">
-                                <option value="fal-ai/bytedance/seedream/v4/edit">图像编辑</option>
-                                <option value="fal-ai/qwen-image-edit-plus">图像编辑 (通义千问)</option>
-                                <option value="fal-ai/bytedance/seedream/v4/text-to-image">文本生成图像</option>
-                            </select>
-                            <small class="help-text">选择用于生成的模型</small>
-                        </div>
-                    </div>
-                    </div>
-                </div>
-
                 <div class="card">
-                    <h2 id="promptTitle">编辑指令</h2>
-                    <div class="form-group">
-                        <label for="prompt" id="promptLabel">编辑提示词</label>
-                        <textarea id="prompt" rows="3" placeholder="例如：给模特穿上衣服和鞋子">给模特穿上衣服和鞋子</textarea>
-                    </div>
-                </div>
-
-                <div class="card" id="imageInputCard">
-                    <div class="card-header">
-                        <h2>输入图像</h2>
-                        <button id="clearAllBtn" class="clear-all-btn" onclick="clearAllInputImages()" title="清除所有输入图像">
-                            清除全部
-                        </button>
-                    </div>
-                    <div class="form-group">
-                        <label>上传图像 (最多10张)</label>
-                        <input type="file" id="fileInput" multiple accept="image/*" />
-                        <small class="help-text upload-limits">单文件 ≤16MB，支持JPG、PNG、WebP格式</small>
-                        <div id="imagePreview" class="image-preview"></div>
-                    </div>
+                    <h2>移动端视图</h2>
+                    <p style="color: var(--text-secondary); font-size: 14px; margin-bottom: var(--spacing-4);">
+                        为获得最佳体验，请横屏使用或在桌面端打开。
+                    </p>
 
                     <div class="form-group">
-                        <label for="imageUrls">或输入图像URL (每行一个)</label>
-                        <textarea id="imageUrls" rows="3" placeholder="https://example.com/image1.jpg&#10;https://example.com/image2.jpg"></textarea>
-                    </div>
-                </div>
-
-                <div class="card collapsed" id="settingsCard">
-                    <div class="card-header">
-                        <h2>设置</h2>
-                        <button type="button" class="settings-toggle-btn" onclick="toggleSettings()"
-                                aria-expanded="false" aria-controls="settingsContent" title="展开/收起设置">
-                            <span class="toggle-icon">▼</span>
-                        </button>
+                        <label for="quickPrompt">快速提示词</label>
+                        <textarea id="quickPrompt" rows="3" placeholder="例如：给模特穿上衣服和鞋子">给模特穿上衣服和鞋子</textarea>
                     </div>
-                    <div class="settings-content" id="settingsContent">
-                        <div class="settings-grid">
-                            <div class="form-group">
-                                <label for="imageSize">图像尺寸</label>
-                                <select id="imageSize">
-                                    <option value="custom" selected>自定义尺寸</option>
-                                    <option value="square_hd">正方形高清 (1024x1024)</option>
-                                    <option value="square">正方形</option>
-                                    <option value="portrait_4_3">竖向 4:3</option>
-                                    <option value="portrait_16_9">竖向 16:9</option>
-                                    <option value="landscape_4_3">横向 4:3</option>
-                                    <option value="landscape_16_9">横向 16:9</option>
-                                </select>
-                            </div>
-
-                            <div class="form-group custom-size">
-                                <label>自定义宽度</label>
-                                <input type="number" id="customWidth" min="1024" max="4096" value="1280" />
-                            </div>
 
-                            <div class="form-group custom-size">
-                                <label>自定义高度</label>
-                                <input type="number" id="customHeight" min="1024" max="4096" value="1280" />
-                            </div>
-
-                            <div class="form-group">
-                                <label for="numImages">生成数量</label>
-                                <input type="number" id="numImages" min="1" max="10" value="1" />
-                            </div>
-
-                            <div class="form-group">
-                                <label for="maxImages">每次生成最大图像数</label>
-                                <input type="number" id="maxImages" min="1" max="10" value="1" />
-                            </div>
-
-                            <div class="form-group">
-                                <label for="seed">随机种子 (可选)</label>
-                                <input type="number" id="seed" placeholder="随机" />
-                            </div>
-
-                            <!-- Safety checker is disabled by default and hidden from UI -->
-                            <input type="hidden" id="safetyChecker" value="false" />
-                        </div>
-                    </div>
+                    <button onclick="closeDrawer(); syncToMainPrompt();" class="generate-btn" style="margin-top: var(--spacing-4);">
+                        <span class="btn-text">前往完整界面</span>
+                    </button>
                 </div>
-
-                <button id="generateBtn" class="generate-btn" aria-busy="false">
-                    <span class="btn-text">生成图像</span>
-                    <div class="spinner" style="display: none;"></div>
-                    <div class="progress-ring" style="display: none;"></div>
-                </button>
-
-                <div id="statusMessage" class="status-message"></div>
-                <div id="progressLogs" class="progress-logs"></div>
             </div>
         </div>
     </div>
 
-    <div class="app-container">
+    <div class="app-container" id="main-content">
         <!-- Left Panel: Controls (desktop) -->
         <div class="left-panel">
             <div class="controls-section">
-                <div class="card collapsed" id="apiConfigCard2">
+                <div class="card collapsed" id="apiConfigCard">
                     <div class="card-header">
                         <h2>API配置</h2>
-                        <button type="button" class="settings-toggle-btn" onclick="toggleApiConfig2()"
-                                aria-expanded="false" aria-controls="apiConfigContent2" title="展开/收起API配置">
+                        <button type="button" class="settings-toggle-btn" onclick="toggleApiConfig()"
+                                aria-expanded="false" aria-controls="apiConfigContent" title="展开/收起API配置">
                             <span class="toggle-icon">▼</span>
                         </button>
                     </div>
-                    <div class="settings-content" id="apiConfigContent2">
+                    <div class="settings-content" id="apiConfigContent">
                     <div class="settings-grid">
                         <div class="form-group">
                             <label for="apiKey">FAL API密钥</label>
@@ -172,7 +70,7 @@
                                 <button type="button" id="testApiKey" class="btn-test" title="测试连接">测试</button>
                             </div>
                             <small class="help-text">从 <a href="https://fal.ai" target="_blank">fal.ai</a> 获取您的API密钥</small>
-                            <div id="apiKeyStatus" class="api-key-status"></div>
+                            <div id="apiKeyStatus" class="api-key-status" role="status" aria-live="polite"></div>
                         </div>
                         <div class="form-group">
                             <label for="modelSelect">模型选择</label>
@@ -203,7 +101,7 @@
                         </button>
                     </div>
                     <div class="form-group">
-                        <label>上传图像 (最多10张)</label>
+                        <label for="fileInput">上传图像 (最多10张)</label>
                         <input type="file" id="fileInput" multiple accept="image/*" />
                         <small class="help-text upload-limits">单文件 ≤16MB，支持JPG、PNG、WebP格式</small>
                         <div id="imagePreview" class="image-preview"></div>
@@ -239,12 +137,12 @@
                             </div>
 
                             <div class="form-group custom-size">
-                                <label>自定义宽度</label>
+                                <label for="customWidth">自定义宽度</label>
                                 <input type="number" id="customWidth" min="1024" max="4096" value="1280" />
                             </div>
 
                             <div class="form-group custom-size">
-                                <label>自定义高度</label>
+                                <label for="customHeight">自定义高度</label>
                                 <input type="number" id="customHeight" min="1024" max="4096" value="1280" />
                             </div>
 
@@ -275,7 +173,7 @@
                     <div class="progress-ring" style="display: none;"></div>
                 </button>
 
-                <div id="statusMessage" class="status-message"></div>
+                <div id="statusMessage" class="status-message" role="status" aria-live="polite"></div>
                 <div id="progressLogs" class="progress-logs"></div>
             </div>
         </div>
@@ -321,9 +219,9 @@
     </div>
 
     <!-- Image Modal/Lightbox -->
-    <div id="imageModal" class="image-modal">
-        <span class="modal-close" onclick="closeImageModal()">&times;</span>
-        <img class="modal-content" id="modalImage">
+    <div id="imageModal" class="image-modal" role="dialog" aria-modal="true" aria-labelledby="modalCaption">
+        <span class="modal-close" onclick="closeImageModal()" aria-label="关闭图片预览">&times;</span>
+        <img class="modal-content" id="modalImage" loading="lazy" decoding="async">
         <div class="modal-caption">
             <div id="modalCaption"></div>
             <button class="modal-use-btn" onclick="useModalImageAsInput()">↻ 作为输入</button>