update code level

assets/css/style.css

@@ -405,6 +405,31 @@ body {
     opacity: 1;
 }
 
+/* 对于触摸设备，添加焦点状态以显示覆盖层 */
+.favorite-card:focus-within .card-overlay {
+    opacity: 1;
+}
+
+/* 媒体查询：针对触摸设备的特殊处理 */
+@media (hover: none) and (pointer: coarse) {
+    .favorite-card .card-overlay {
+        opacity: 0.2; /* 在触摸设备上始终轻微显示覆盖层 */
+    }
+    
+    .favorite-card:active .card-overlay,
+    .favorite-card:focus .card-overlay {
+        opacity: 1;
+    }
+}
+
+/* 为了兼容性，也为触摸设备上的元素添加焦点样式 */
+@media (hover: hover) and (pointer: fine) {
+    /* 在非触摸设备上保持原有hover效果 */
+    .favorite-card:hover .card-overlay {
+        opacity: 1;
+    }
+}
+
 .overlay-content {
     display: flex;
     gap: 6px;

assets/js/app.js

@@ -19,7 +19,7 @@ class ImageLoader {
         this.cache = new Map();
     }
 
-    // 加载并解压图片
+    // 加载图片
     async loadImage(imageId, element) {
         // 检查缓存
         if (this.cache.has(imageId)) {
@@ -36,22 +36,10 @@ class ImageLoader {
             }
 
             const contentType = response.headers.get('content-type');
-            const contentEncoding = response.headers.get('content-encoding');
-            const originalContentType = response.headers.get('x-original-content-type');
-
-            let imageData;
-            
-            if (contentEncoding === 'br') {
-                // Brotli压缩数据，需要解压
-                const compressedData = await response.arrayBuffer();
-                imageData = await this.decompressBrotli(compressedData);
-            } else {
-                // 未压缩数据
-                imageData = await response.blob();
-            }
+            const imageData = await response.blob();
 
             // 创建Blob URL
-            const mimeType = originalContentType || contentType || 'image/jpeg';
+            const mimeType = contentType || 'image/jpeg';
             const blob = new Blob([imageData], { type: mimeType });
             const blobUrl = URL.createObjectURL(blob);
 
@@ -83,35 +71,6 @@ class ImageLoader {
         img.src = blobUrl;
     }
 
-    // Brotli解压
-    async decompressBrotli(compressedData) {
-        // 检查浏览器是否支持Brotli解压
-        if (window.TextDecoder && window.TextEncoder) {
-            try {
-                // 使用浏览器的Brotli解压（如果支持）
-                if (window.DecompressionStream && 'br' in window) {
-                    const decompressionStream = new DecompressionStream('br');
-                    const decompressedStream = new Response(compressedData).body.pipeThrough(decompressionStream);
-                    return new Response(decompressedStream).arrayBuffer();
-                }
-            } catch (error) {
-                console.warn('浏览器Brotli解压失败，使用JavaScript解压:', error);
-            }
-        }
-
-        // 使用JavaScript实现的Brotli解压（备用方案）
-        return await this.decompressBrotliJS(compressedData);
-    }
-
-    // JavaScript实现的Brotli解压（备用方案）
-    async decompressBrotliJS(compressedData) {
-        // 这里可以集成一个轻量级的Brotli解压库
-        // 由于Brotli解压比较复杂，这里先返回原始数据
-        // 在实际项目中，可以使用第三方库如brotli-wasm
-        console.warn('Brotli解压未实现，返回原始数据');
-        return compressedData;
-    }
-
     // 清理缓存
     clearCache() {
         // 清理所有Blob URL
@@ -890,7 +849,7 @@ function displayFavorites(favoriteImages) {
                         </button>
                     </div>
                 ` : `${favoriteImages.map((fav, index) => `
-                            <div class="favorite-card" onclick="openFavoriteImage('${fav.favorite.album_id}')">
+                            <div class="favorite-card" onclick="openFavoriteImage('${fav.favorite.album_id}')" tabindex="0">
                                 <div class="card-image">
                                     <img src="/assets/placeholder.svg" 
                                          data-image-id="${fav.image.id}"
@@ -898,10 +857,10 @@ function displayFavorites(favoriteImages) {
                                          loading="lazy">
                                     <div class="card-overlay">
                                         <div class="overlay-content">
-                                            <button class="quick-view" onclick="event.stopPropagation(); previewFavorite(${index})">
+                                            <button class="quick-view" onclick="event.stopPropagation(); previewFavorite(${index})" aria-label="预览图片">
                                                 <i class="fas fa-expand"></i>
                                             </button>
-                                            <button class="remove-favorite" onclick="removeFavorite(event, '${fav.favorite.id}')">
+                                            <button class="remove-favorite" onclick="removeFavorite(event, '${fav.favorite.id}')" aria-label="移除收藏">
                                                 <i class="fas fa-trash"></i>
                                             </button>
                                         </div>
@@ -948,6 +907,9 @@ function displayFavorites(favoriteImages) {
                     </div>
                 </div>
             </div>`;
+
+    // 初始化图片懒加载，确保收藏的图片被加载
+    initLazyLoading();
 }
 
 // 格式化日期
@@ -1143,7 +1105,7 @@ function updatePreviewContent(newIndex) {
 
         // 加载新图片
         const newImage = new Image();
-        newImage.src = `${API_BASE}/original/${favorite.image.id}`;
+        newImage.src = `${API_BASE}/image/${favorite.image.id}`;
         newImage.alt = favorite.image.title || '预览图片';
         newImage.className = 'preview-image';
 

config.toml

@@ -3,7 +3,7 @@ url = "sqlite:./data/imager.db"
 
 [server]
 host = "0.0.0.0"
-port = 8080
+port = 8083
 
 [storage]
 images_dir = "./albums"