优化：图库按时间倒序排列并增强移动端触摸交互

script.js

@@ -399,8 +399,8 @@ const indexedDBStorage = {
                 const request = index.getAll();
                 request.onsuccess = () => {
                     const images = request.result || [];
-                    // 按时间戳排序
-                    images.sort((a, b) => a.timestamp - b.timestamp);
+                    // 按时间戳倒序排序（最新的在前）
+                    images.sort((a, b) => b.timestamp - a.timestamp);
                     resolve(images.map(img => ({
                         id: img.imageId,
                         url: img.url
@@ -797,7 +797,7 @@ const uiController = {
             </div>
         `;
         
-        gallery.appendChild(imageDiv);
+        gallery.insertBefore(imageDiv, gallery.firstChild);
         
         // 添加事件监听器
         const viewLargeBtn = imageDiv.querySelector('.view-large-btn');
@@ -805,6 +805,9 @@ const uiController = {
         const copyBtn = imageDiv.querySelector('.copy-url-btn');
         const removeBtn = imageDiv.querySelector('.remove-btn');
         
+        // 添加移动端触摸交互
+        this.addMobileTouchInteraction(imageDiv);
+        
         if (viewLargeBtn) {
             viewLargeBtn.addEventListener('click', (e) => {
                 e.stopPropagation();
@@ -833,8 +836,8 @@ const uiController = {
             });
         }
         
-        // 添加到内存中的图像记录
-        generatedImages.push({ id: imageId, url: imageUrl });
+        // 添加到内存中的图像记录（插入到最前面）
+        generatedImages.unshift({ id: imageId, url: imageUrl });
         
         // 显示"全部下载"按钮
         this.updateDownloadAllButtonVisibility();
@@ -868,7 +871,7 @@ const uiController = {
             </div>
         `;
         
-        gallery.appendChild(placeholderDiv);
+        gallery.insertBefore(placeholderDiv, gallery.firstChild);
         return placeholderDiv;
     },
 
@@ -911,6 +914,9 @@ const uiController = {
         const copyBtn = placeholder.querySelector('.copy-url-btn');
         const removeBtn = placeholder.querySelector('.remove-btn');
         
+        // 添加移动端触摸交互
+        this.addMobileTouchInteraction(placeholder);
+        
         if (viewLargeBtn) {
             viewLargeBtn.addEventListener('click', (e) => {
                 e.stopPropagation();
@@ -939,8 +945,8 @@ const uiController = {
             });
         }
         
-        // 添加到内存中的图像记录
-        generatedImages.push({ id: imageId, url: imageUrl });
+        // 添加到内存中的图像记录（插入到最前面）
+        generatedImages.unshift({ id: imageId, url: imageUrl });
         
         // 显示"全部下载"按钮
         this.updateDownloadAllButtonVisibility();
@@ -1255,6 +1261,61 @@ const uiController = {
         this.updateNavigationButtons();
     },
 
+    // 添加移动端触摸交互
+    addMobileTouchInteraction: function(imageElement) {
+        if (!imageElement) return;
+        
+        let touchTimeout = null;
+        let isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+        
+        if (!isTouchDevice) return; // 非触摸设备不需要添加此交互
+        
+        // 添加触摸开始事件
+        const touchStartHandler = (e) => {
+            // 清除之前的超时
+            if (touchTimeout) {
+                clearTimeout(touchTimeout);
+            }
+            
+            // 添加touched类
+            imageElement.classList.add('touched');
+            
+            // 设置超时，3秒后自动移除touched类
+            touchTimeout = setTimeout(() => {
+                imageElement.classList.remove('touched');
+            }, 3000);
+        };
+        
+        // 添加点击外部移除touched类的逻辑
+        const documentClickHandler = (e) => {
+            if (!imageElement.contains(e.target)) {
+                imageElement.classList.remove('touched');
+                if (touchTimeout) {
+                    clearTimeout(touchTimeout);
+                }
+            }
+        };
+        
+        // 绑定事件
+        imageElement.addEventListener('touchstart', touchStartHandler, { passive: true });
+        imageElement.addEventListener('click', touchStartHandler); // 也支持点击
+        
+        // 存储清理函数，以便后续清理
+        imageElement._cleanupMobileTouch = () => {
+            imageElement.removeEventListener('touchstart', touchStartHandler);
+            imageElement.removeEventListener('click', touchStartHandler);
+            document.removeEventListener('click', documentClickHandler);
+            if (touchTimeout) {
+                clearTimeout(touchTimeout);
+            }
+        };
+        
+        // 添加到全局点击监听器（延迟添加避免立即触发）
+        setTimeout(() => {
+            document.addEventListener('click', documentClickHandler);
+        }, 100);
+    },
+
     // 显示图像预览
     displayImagePreview: function(imageData) {
         const preview = document.getElementById('imagePreview');
@@ -1405,7 +1466,7 @@ const uiController = {
                         </div>
                     </div>
                 `;
-                gallery.appendChild(imageDiv);
+                gallery.appendChild(imageDiv); // 由于数据库查询已经是倒序，这里用appendChild保持顺序
                 
                 // 添加事件监听器
                 const viewLargeBtn = imageDiv.querySelector('.view-large-btn');
@@ -1413,6 +1474,9 @@ const uiController = {
                 const copyBtn = imageDiv.querySelector('.copy-url-btn');
                 const removeBtn = imageDiv.querySelector('.remove-btn');
                 
+                // 添加移动端触摸交互
+                this.addMobileTouchInteraction(imageDiv);
+                
                 if (viewLargeBtn) {
                     viewLargeBtn.addEventListener('click', (e) => {
                         e.stopPropagation();
@@ -1457,6 +1521,10 @@ const uiController = {
         imageElements.forEach(element => {
             const removeBtn = element.querySelector('.remove-btn');
             if (removeBtn && removeBtn.dataset.imageId == imageId) {
+                // 清理移动端触摸事件监听器
+                if (element._cleanupMobileTouch) {
+                    element._cleanupMobileTouch();
+                }
                 element.remove();
             }
         });