Upload 12 files

index.html

@@ -22,7 +22,7 @@
         }
         
         header {
-            margin-top: 80px; /* 为输入区留空间 */
+            margin-top: 190px; /* 为输入区留空间 */
         }
         
         .history-container {
@@ -48,15 +48,15 @@
         
         /* 动态调整header间距 */
         .has-preview header {
-            margin-top: 240px;
+            margin-top: 360px;
         }
         
         @media (max-width: 768px) {
             header {
-                margin-top: 110px;
+                margin-top: 170px;
             }
             .has-preview header {
-                margin-top: 220px;
+                margin-top: 320px;
             }
         }
     </style>
@@ -98,7 +98,7 @@
             
             <!-- 下部分：操作栏 -->
             <div class="control-bar">
-                <button class="upload-trigger" id="upload-btn" title="上传参考图">上传</button>
+                <button class="upload-trigger" id="upload-btn" title="上传参考图">上传图片</button>
                 <textarea id="prompt" class="main-input" rows="1" placeholder="描述画面... (支持拖拽图片)"></textarea>
                 <button class="ghost-btn" id="clear-btn" title="清空输入" aria-label="清空输入">清空</button>
                 <button class="btn-3d send-btn" id="send-btn">
@@ -108,7 +108,7 @@
             </div>
             <div class="tips-row" id="tips-row">
                 <span class="tip-pill">提示：写明主体 + 风格 + 光线</span>
-                <span class="tip-pill">支持参考图?先上传再描述</span>
+                <span class="tip-pill">支持参考图：先上传再描述</span>
                 <span class="tip-pill">画面比例 / 构图 写清楚更稳定</span>
             </div>
         </div>
@@ -140,7 +140,7 @@
                         <p class="section-subtitle" id="public-gallery-hint">分享你的作品，欣赏社区灵感</p>
                     </div>
                     <div class="section-actions">
-                        <button class="icon-btn" id="refresh-public-gallery" title="刷新公共画廊" aria-label="刷新公共画廊">⟳</button>
+                        <button class="icon-btn" id="refresh-public-gallery" title="刷新公共画廊" aria-label="刷新公共画廊">刷新画廊</button>
                     </div>
                 </div>
                 <div class="grid-layout public-grid" id="public-gallery"></div>
@@ -173,7 +173,7 @@
     // ============================================
     const AppState = {
         db: null,
-        currentImages: [],     // 当前上传的图片 Base64 数组
+        currentImages: [],     // 当前上传图片的图片 Base64 数组
         galleryData: [],       // 个人画廊数据缓存
         publicGalleryData: [], // 公共画廊数据缓存
         currentModalItem: null // 当前弹窗显示的项目
@@ -311,14 +311,14 @@
             });
         },
 
-        // 处理上传的文件
+        // 处理上传图片的文件
         async processFiles(files) {
             const maxImages = 16;
             const imageFiles = Array.from(files).filter(f => f.type.startsWith('image/'));
 
             for (const file of imageFiles) {
                 if (AppState.currentImages.length >= maxImages) {
-                    alert(`最多只能上传 ${maxImages} 张图片`);
+                    alert(`最多只能上传图片 ${maxImages} 张图片`);
                     break;
                 }
 
@@ -340,7 +340,7 @@
             PreviewManager.render();
         },
         
-        // 清空所有上传的图片
+        // 清空所有上传图片的图片
         clear() {
             AppState.currentImages = [];
             PreviewManager.render();
@@ -391,7 +391,8 @@
                 
                 const removeBtn = document.createElement('div');
                 removeBtn.className = 'thumb-remove';
-                removeBtn.textContent = '??';
+                removeBtn.textContent = '\u00d7';
+                removeBtn.title = '移除';
                 removeBtn.onclick = (e) => {
                     e.stopPropagation();
                     ImageHandler.removeAt(index);
@@ -600,7 +601,7 @@ const GalleryManager = {
 
             const shareBtn = document.createElement('button');
             shareBtn.className = 'icon-btn share-btn';
-            shareBtn.textContent = '发';
+            shareBtn.textContent = '发布';
             shareBtn.title = '发布到公共画廊';
             shareBtn.setAttribute('aria-label', '发布到公共画廊');
             shareBtn.onclick = (e) => {
@@ -610,7 +611,7 @@ const GalleryManager = {
 
             const downloadBtn = document.createElement('button');
             downloadBtn.className = 'icon-btn';
-            downloadBtn.textContent = '??';
+            downloadBtn.textContent = '下载';
             downloadBtn.title = '下载图片';
             downloadBtn.onclick = (e) => {
                 e.stopPropagation();
@@ -620,7 +621,7 @@ const GalleryManager = {
             const deleteBtn = document.createElement('button');
             deleteBtn.className = 'icon-btn';
             deleteBtn.style.background = 'rgba(239,68,68,0.8)';
-            deleteBtn.textContent = '删';
+            deleteBtn.textContent = '删除';
             deleteBtn.title = '删除图片';
             deleteBtn.onclick = (e) => {
                 e.stopPropagation();
@@ -951,7 +952,7 @@ const GalleryManager = {
             if (this.canDelete(item.id)) {
                 const deleteBtn = document.createElement('button');
                 deleteBtn.className = 'icon-btn small public-delete-btn';
-                deleteBtn.textContent = '删';
+                deleteBtn.textContent = '删除';
                 deleteBtn.title = '删除这张作品';
                 deleteBtn.onclick = (e) => {
                     e.stopPropagation();
@@ -1264,7 +1265,7 @@ const GalleryManager = {
     };
     
     // ============================================
-    // 拖拽上传模块
+    // 拖拽上传图片模块
     // ============================================
     const DragDrop = {
         dropZone: null,
@@ -1400,4 +1401,4 @@ const GalleryManager = {
     }
     </script>
 </body>
-</html>
+</html>

style.css

@@ -25,7 +25,7 @@
 }
 
 body {
-    font-family: 'Avenir Next', 'Trebuchet MS', 'Segoe UI', sans-serif;
+    font-family: 'Avenir Next', 'Trebuchet MS', 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif;
     background:
         radial-gradient(700px 360px at 10% -10%, rgba(59, 130, 246, 0.25), transparent 60%),
         radial-gradient(700px 420px at 90% -20%, rgba(14, 165, 233, 0.18), transparent 55%),
@@ -177,15 +177,15 @@ body {
     }
 }
 
-header {
-    padding: 15px 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-shrink: 0;
-    margin-top: 150px;
-    transition: margin-top var(--transition-normal);
-}
+header {
+    padding: 15px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+    margin-top: 190px;
+    transition: margin-top var(--transition-normal);
+}
 
 header h2 { 
     font-size: 1.2rem; 
@@ -304,9 +304,9 @@ header h2 {
 }
 
 
-body.has-preview header {
-    margin-top: 280px;
-}
+body.has-preview header {
+    margin-top: 360px;
+}
 
 /* --- History Gallery --- */
 .history-container {
@@ -517,14 +517,16 @@ body.has-preview header {
     margin-bottom: 16px;
 }
 
-.icon-btn.small {
-    width: 36px;
-    height: 36px;
-    font-size: 14px;
-    background: rgba(239, 68, 68, 0.9);
-    border-color: rgba(248, 113, 113, 0.7);
-    transition: all var(--transition-fast);
-}
+.icon-btn.small {
+    min-width: 52px;
+    width: auto;
+    height: 34px;
+    padding: 0 8px;
+    font-size: 11px;
+    background: rgba(239, 68, 68, 0.9);
+    border-color: rgba(248, 113, 113, 0.7);
+    transition: all var(--transition-fast);
+}
 
 .icon-btn.small:hover {
     background: rgba(239, 68, 68, 0.95);
@@ -635,10 +637,17 @@ body.has-preview header {
     backdrop-filter: blur(8px);
     display: flex;
     justify-content: flex-end;
-    gap: 8px;
+    gap: 6px;
+    flex-wrap: wrap;
     opacity: 0;
     transition: opacity var(--transition-normal);
 }
+.item-actions .icon-btn {
+    min-width: 50px;
+    font-size: 11px;
+    padding: 0 8px;
+}
+
 
 .history-item:hover .item-actions { 
     opacity: 1; 
@@ -648,10 +657,11 @@ body.has-preview header {
     .item-actions { opacity: 1; } 
 }
 
-.icon-btn {
-    width: 36px; 
-    height: 36px;
-    border-radius: 8px;
+.icon-btn {
+    min-width: 72px;
+    height: 34px;
+    padding: 0 10px;
+    border-radius: 8px;
     background: rgba(255,255,255,0.15);
     color: white;
     border: 1px solid rgba(255,255,255,0.2);
@@ -659,10 +669,12 @@ body.has-preview header {
     align-items: center; 
     justify-content: center;
     backdrop-filter: blur(8px);
-    cursor: pointer;
-    transition: all var(--transition-fast);
-    font-size: 16px;
-}
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    font-size: 12px;
+    line-height: 1;
+    white-space: nowrap;
+}
 
 .icon-btn:hover {
     background: rgba(255,255,255,0.25);
@@ -831,8 +843,9 @@ body.has-preview header {
 
 
 .upload-trigger {
-    width: 44px; 
+    min-width: 80px;
     height: 44px;
+    padding: 0 12px;
     border-radius: 12px;
     background: rgba(255,255,255,0.05);
     border: 2px dashed rgba(255,255,255,0.3);
@@ -840,9 +853,9 @@ body.has-preview header {
     display: flex; 
     align-items: center; 
     justify-content: center;
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 600;
-    letter-spacing: 1px;
+    letter-spacing: 0.5px;
     flex-shrink: 0;
     transition: all var(--transition-normal);
     cursor: pointer;
@@ -910,7 +923,8 @@ body.has-preview header {
     border: 1px solid rgba(148, 163, 184, 0.2);
     border-radius: 12px;
     color: white;
-    font-size: 16px;
+    font-size: 12px;
+    line-height: 1;
     padding: 10px 12px;
     resize: none;
     max-height: 120px;
@@ -1246,7 +1260,8 @@ body.has-preview header {
 .login-card .btn-3d {
     width: 100%;
     padding: 14px;
-    font-size: 16px;
+    font-size: 12px;
+    line-height: 1;
 }
 
 /* --- Mobile Responsive Design --- */
@@ -1298,11 +1313,13 @@ body.has-preview header {
          font-size: 0.7rem;
      }
 
-     .icon-btn.small {
-         width: 32px;
-         height: 32px;
-         font-size: 12px;
-     }
+     .icon-btn.small {
+         min-width: 50px;
+         width: auto;
+         height: 32px;
+         padding: 0 6px;
+         font-size: 11px;
+     }
 
      .public-gallery-empty {
          padding: 40px 20px;
@@ -1390,13 +1407,13 @@ body.has-preview header {
         height: 85%;
     }
     
-    header {
-        margin-top: 150px;
-    }
-    
-    body.has-preview header {
-        margin-top: 230px;
-    }
+    header {
+        margin-top: 190px;
+    }
+    
+    body.has-preview header {
+        margin-top: 360px;
+    }
 }
 
 /* --- Large Screen Optimization --- */